/* =====================================================
   UBT — SHARED CSS (BASIC VERSION)
   - Tüm sayfalar bunu kullanır
   - Kartlar: .card / .detail-card
   - Renkler: .card-color-1..5
   ===================================================== */

/* ---------- Global reset ---------- */
* { margin:0; padding:0; box-sizing:border-box; }

/* =====================================================
   🔗 LINK STİLLERİ (LINK STYLES)
   =====================================================
   
   Tüm linkler için tutarlı renk davranışı:
   - Tıklanmış olsun veya olmasın, link rengi değişmez
   - Sadece hover efekti uygulanır (isteğe bağlı)
   - text-decoration kontrolü
   
   ===================================================== */

/* Tüm link durumları için aynı renk */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit !important; /* Parent element'in rengini kullan - her zaman */
  text-decoration: none; /* Alt çizgiyi kaldır */
}

/* Hover efekti için (isteğe bağlı - sadece opacity değişir) */
a:hover {
  opacity: 0.85; /* Hafif soluklaşma efekti */
  transition: opacity 0.2s ease;
}

/* Eğer link içinde özel renk tanımlanmışsa bile, inherit kullan */
a[style*="color"] {
  color: inherit !important;
}

/* Özel durum: Eğer link altı çizili olması gerekiyorsa, sadece hover'da göster */
a[style*="text-decoration:underline"],
a.underline {
  text-decoration: underline;
}

a[style*="text-decoration:underline"]:hover,
a.underline:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* Drawer menu text color fix (works with global a{color:inherit!important}) */
.drawer,
.drawer .menu-links {
  color: #fff;
}

.drawer .menu-link {
  color: #fff !important;
}

/* END of block: Link Styles */

/* ---------- Body background + base font ---------- */
body {
    font-family:'Segoe UI', Tahoma, sans-serif;
    background:linear-gradient(135deg,#1a1a2e,#16213e);
    padding:20px;
    min-height:100vh;
}

/* ---------- Container (mobile-friendly centered layout) ---------- */
.container {
    max-width:355px;
    margin:auto;
    display:flex;
    flex-direction:column;
  gap:15px;
  padding-bottom:60px;
}

.container1 {
    max-width:355px;
    margin:auto;
    display:flex;
    flex-direction:column;
  gap:15px;
  padding-bottom:60px;
}


/* =====================================================
   CARDS ROOT (dynamic cards spacing)
   - shared-cards.js ortak kartlari inject eder
   - kartlar arası boşluk burada yönetilir
   ===================================================== */
#cards-root{
    display:flex;
    flex-direction:column;
    gap:15px; /* kartlar arası boşluk */
}
/* END of block: Cards Root */


/* =====================================================
   PROJECT CARDS (logos left, text right)
   - Used in Corporate/Private projects
   ===================================================== */
.proj-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.proj-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Logo fixed size, stays left, never shrinks */
.proj-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
/* END of block: Project Cards */

/* =====================================================
   CARD BASE
   - .card  : hero + navigation
   - .detail-card : all content sections
   ===================================================== */
.card, .detail-card {
    background:white;
    border-radius:22px;
    padding:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
    position:relative;
}
/* END of block: Card Base */

/* =====================================================
   HERO
   ===================================================== */
.hero-card {
    background:linear-gradient(135deg,#ff6b35,#f7931e);
    color:white;
}

.hero-top {
    display:flex;
    justify-content:space-between;
    margin-bottom:18px;
}

.hero-logo { width:48px; height:48px; border-radius:50%; }
.hero-domain { font-size:20px; font-weight:600; color:white; }
.hero-logo-box { display:flex; align-items:center; gap:8px; }

/* Home icon in hero */
.home-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    padding:6px;
    background:white;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    transition:.2s;
}

.home-icon:hover { transform:scale(1.1); }
/* END of block: Hero */

/* ---------- Titles ---------- */
.section-title {
    font-size:19px;
    font-weight:700;
    margin-bottom:12px;
}
/* =====================================================
   COLOR PALETTE REFERENCE
   ===================================================== */

/* almanya101 */
:root {
  /* almanya101 Ana Renk Paleti */
  --alm-blue: #01A1F1;
  --alm-green: #7CBB00;
  --alm-orange: #F65314;
  --alm-yellow: #FFBB00;
  --alm-purple: #8F03B7;
  --alm-red: #BF0000;
  --alm-black: #000000;
  --alm-white: #FFFFFF;

  /* Panel solids tuned for black text (derived from palette) */
  --alm-blue-tint: #bfe7ff;
  --alm-green-tint: #d7f0b8;
  --alm-orange-tint: #ffd9c7;
  --alm-purple-tint: #e9dbf7;
  --alm-yellow-tint: #fff1b3;

  /* Borders for solid panels */
  --alm-blue-border: #8dcefb;
  --alm-green-border: #b6e08a;
  --alm-orange-border: #ffb798;
  --alm-purple-border: #cdb2e7;
  --alm-yellow-border: #ffd066;

  /* UBT (Legacy - uyumluluk için) */
  --ubt-blue: #01A1F1;
  --ubt-green: #7CBB00;
  --ubt-orange: #F65314;
  --ubt-purple: #8F03B7;
  --ubt-yellow: #FFBB00;
  --ubt-black: #000000;
  --ubt-red: #BF0000;
  --ubt-white: #FFFFFF;

  /* Holiday Planner Variables */
  --c-blue:   #01A1F1;
  --c-green:  #7CBB00;
  --c-orange: #F65314;
  --c-purple: #8F03B7;
  --c-yellow: #FFBB00;
  --ink: #111827;
  --muted: #6B7280;
  --border: #E5E7EB;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(0,0,0,.10);
  --shadow2: 0 8px 20px rgba(0,0,0,.08);
}


/* =====================================================
   NEW HERO
    ===================================================== */


.hero-card1 {
  background: linear-gradient(135deg, #FFBB00, #f7931e);
  color: white;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  position: relative;
}

.hero-top1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.hero-logo1 { width: 48px; height: 48px; border-radius: 50%; }
.hero-domain1 { font-size: 20px; font-weight: 600; color: white; }
.hero-logo-box1 { display: flex; align-items: center; gap: 8px; }

.hero-card1 h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px 0;
  color: white;
}

.hero-card1 .title {
  font-size: 14px;
  color: rgba(255,255,255,0.95);
  margin: 0;
  line-height: 1.4;
}

.home-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 6px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: .2s;
}

.home-icon:hover {
  transform: scale(1.1);
}

/* Shared info + contact card styles */
.info-card {
  background: #FF9900 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.info-card .panelTop {
  margin-bottom: 10px;
}

.info-card .panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  letter-spacing: .2px;
}

.info-card .stackBtnsVertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-card .btn--ghost {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: #111 !important;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.info-card .btn--ghost:hover {
  filter: brightness(1.02);
}

.info-card .btn--ghost:active {
  transform: translateY(1px);
}

.info-card .infobox {
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.90);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  color: #111;
}

.info-card .infobox .bullets {
  margin: 0;
  padding-left: 18px;
}

.info-card .infobox .bullets li {
  margin: 6px 0;
  line-height: 1.35;
}

.info-card .infobox.hidden {
  display: none;
}

.contact-card {
  background: #7CBB00 !important;
  color: white !important;
  text-align: center;
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  position: relative;
  margin: 15px 0 15px 0;
}

.contact-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: white;
}

.contact-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  justify-content: center;
  gap: 18px 22px;
  margin: 20px 0 10px 0;
}

.contact-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.contact-icon-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}

.contact-icon-wrapper img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@media (max-width: 500px) {
  .hero-card1 {
    padding: 18px;
    border-radius: 18px;
  }

  .hero-card1 h3 {
    font-size: 20px;
  }

  .hero-card1 .title {
    font-size: 13px;
  }

  .contact-card {
    padding: 16px 16px 12px;
  }

  .contact-icon-grid {
    grid-template-columns: repeat(3, 50px);
    gap: 14px 18px;
  }

  .contact-icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .contact-icon-wrapper img {
    width: 24px;
    height: 24px;
  }
}

/* Hero Logo Image */
.hero-logo-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
  backdrop-filter: blur(10px);
}

.hero-logo-img:hover {
  transform: scale(1.02);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* WhatsApp CTA Button */
.whatsapp-cta-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--alm-orange);
  color: #000000;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.whatsapp-cta-btn:hover {
  filter: brightness(1.1);
  transform: translateX(5px);
}

.whatsapp-icon {
  font-size: 20px;
  display: inline-block;
}

.whatsapp-text {
  flex: 1;
  text-align: left;
}

.whatsapp-arrow {
  font-size: 18px;
  color: #000000;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 
      0 8px 24px rgba(37, 211, 102, 0.4),
      0 4px 12px rgba(37, 211, 102, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 
      0 8px 24px rgba(37, 211, 102, 0.6),
      0 4px 12px rgba(37, 211, 102, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.15),
      0 0 20px rgba(37, 211, 102, 0.3);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}








/* Home icon in hero */
.home-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    padding:6px;
    background:white;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    transition:.2s;
}

.home-icon:hover { transform:scale(1.1); }
/* END of block: Hero */

/* ---------- Titles ---------- */
.section-title {
    font-size:19px;
    font-weight:700;
    margin-bottom:12px;
}

/* =====================================================
   5-COLOR CARD PALETTE (Office style)
   - Apply to .detail-card via class
   ===================================================== */
.card-color-1 { background:#01A1F1 !important; color:white !important; } /* Blue */
.card-color-2 { background:#7CBB00 !important; color:white !important; } /* Green */
.card-color-3 { background:#F65314 !important; color:white !important; } /* Orange */
.card-color-4 { background:#8F03B7 !important; color:white !important; } /* Purple */
.card-color-5 { background:#FFBB00 !important; color:#222 !important; }  /* Yellow (dark text) */
/* END of block: Card Colors */

/* (Legacy office-* classes — optional) */
.office-orange { background:#D83B01 !important; color:white; }
.office-green  { background:#107C41 !important; color:white; }
.office-blue   { background:#185ABD !important; color:white; }
.office-purple { background:#742774 !important; color:white; }
.office-teams  { background:#005A9E !important; color:white; }
.office-contact{ background:#107C10 !important; color:white; }

/* =====================================================
   NAV CARD (yellow)
   ===================================================== */
.nav-card { background:#FFBB00 !important; color:#333; }

.nav-grid {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.nav-item {
    background:white;
    border-radius:16px;
  padding:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  min-height:78px;
    font-size:16px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.15);
    transition:.15s;
}

.nav-desc {
    display: block;
    margin-top: 4px;
    opacity: .8;
    font-size: .78em;
}

.nav-item:hover {
    background:#fff3c4;
    transform:translateX(5px);
}

/* END of block: Navigation */

/* =====================================================
   CARD BUTTONS (Home + Up)
   ===================================================== */
.card-buttons {
    position:absolute;
    right:14px;
    top:14px;
    display:flex;
    gap:10px;
}

/* Footer blue card (shared) */
.footer-blue-card {
  background: var(--ubt-blue, #0ea5e9);
  color: #fff;
  padding: 12px 16px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.footer-blue-card__buttons {
  margin-bottom: 6px;
}

.footer-blue-card-wrap {
  width: 100%;
  max-width: 100%;
  margin: 15px 0 15px 0;
}

/* When footer is inside container flex with 15px gap, avoid double spacing */
.container .footer-blue-card-wrap,
.container1 .footer-blue-card-wrap {
  margin-top: 0;
}

/* Footer text styles */
.footer-slogan {
  font-size: 11px;
  line-height: 1.15;
  margin-top: 2px;
}

.footer-credit {
  font-size: 13.5px;
  line-height: 1.2;
  margin-top: 4px;
}

.footer-copyright {
  font-size: 13.5px;
  line-height: 1.2;
  margin-top: 2px;
}

.btn-icon {
    width:34px;
    height:34px;
    border-radius:10px;
    padding:5px;
    background:rgba(255,255,255,0.35);
    backdrop-filter:blur(4px);
    box-shadow:0 2px 6px rgba(0,0,0,.22);
    cursor:pointer;
    transition:.15s;
    object-fit:contain; /* icon cropping fix */
    max-width:34px; /* force max width */
    max-height:34px; /* force max height */
}

.btn-icon:hover {
    transform:scale(1.12);
    background:rgba(255,255,255,0.55);
}
/* END of block: Card Buttons */

/* =====================================================
   ACHIEVEMENTS LIST
   ===================================================== */
.ach-list {
    display:flex;
    flex-direction:column;
    gap:14px;
    font-size:14px;
    line-height:1.55;
}
/* END of block: Achievements */

/* =====================================================
   TECH STACK SECTION
   ===================================================== */
.tech-section {
    display:flex;
    flex-direction:column;
    gap:16px;
    font-size:14px;
    line-height:1.55;
}

.tech-section h4 {
    margin:0;
    font-size:15px;
    font-weight:700;
}
/* END of block: Tech Stack */

/* =====================================================
   EXPERIENCE
   ===================================================== */

.exp-role { font-size:17px; font-weight:700; margin:0; }
.exp-company { font-size:15px; font-weight:600; margin:2px 0 0 0; }
.exp-sub { font-size:13px; opacity:.75; margin-top:2px; }

.exp-list {
    list-style:none;
    padding:0;
    margin:0;
}

.exp-list li {
    margin-bottom:10px;
    font-size:14px;
    line-height:1.45;
}
/* END of block: Experience */

/* =====================================================
   OVERLAP FIX: give the card bottom space for the widget
   ===================================================== */
.card{ padding-bottom: 74px; } /* widget space */

/* On small screens give a bit more */
@media (max-width:700px){
  .card{ padding-bottom: 96px; }
}

/* Menu nav card: keep bottom padding tight */
.nav-card{ padding-bottom: 15px !important; }

/* Footer blue card should not inherit extra widget spacing */
.footer-blue-card{
  padding: 12px 16px 15px 16px;
}

/* Also ensure preview panel has breathing space */
.panel.preview-panel{ padding-bottom: 64px; }


/* Smooth scrolling for anchor jumps */
html { scroll-behavior:smooth; }
/* END of file: ubt-shared.css */

.insights-panel {
  margin-top: 14px;
}

.insight-block {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.insight-block.issues {
  border-left: 4px solid #ff6b6b;
}

.insight-block.fixes {
  border-left: 4px solid #51cf66;
}

.insight-block ul {
  margin: 6px 0 0 16px;
  padding: 0;
  font-size: 13px;
  color: var(--text);
}

/* =====================================================
   HOLIDAY PLANNER STYLES (ztatilde + ztatiltr)
   ===================================================== */

.muted { 
  color: var(--muted); 
  font-size: 13px;
  line-height: 1.35;
}
.hidden { display: none !important; }

/* Layout */
.stack {
  display: grid;
  gap: 15px;
}

/* Panels */
.panel {
  padding: 14px;
  border-radius: 16px;
  box-shadow: var(--shadow2);
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  position: relative;
  overflow: hidden;
}

.panel--blue { background: var(--alm-blue); border-color: #0088d0; color: #fff; }
.panel--green { background: var(--alm-green); border-color: #5f9e00; color: #fff; }
.panel--orange { background: var(--alm-orange); border-color: #d8440c; color: #fff; }
.panel--purple { background: var(--alm-purple); border-color: #6f029a; color: #fff; }
.panel--yellow { background: var(--alm-yellow); border-color: #dba200; color: #111; }

.panel__title {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .2px;
}

.panelTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons */
.stackBtns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stackBtnsVertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn--wide {
  width: 100%;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
}

.actions .btn {
  flex: 1;
  max-width: 200px;
}

.btn {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  background: rgba(255,255,255,.90);
  color: var(--ink);
  transition: transform .12s ease, filter .12s ease;
}

.btn:hover { filter: brightness(1.02); }
.btn:active { transform: translateY(1px); }

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(1,161,241,.18);
}

.btn--primary { background: var(--c-blue); color: #fff; border-color: rgba(0,0,0,.08); }
.btn--danger { background: var(--c-orange); color: #fff; border-color: rgba(0,0,0,.08); }
.btn--ghost { background: rgba(255,255,255,.82); }

/* Fields */
.row2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 520px) {
  .row2 { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: 6px; }
.field__label { font-size: 12px; color: var(--muted); }

input[type="date"], .select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  font-size: 14px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
}

/* Dropdown Select Styles */
.dropdown-select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255, .12);
  border-radius: 12px;
  font-size: 14px;
  background: rgba(255, 255, 255, .05);
  color: #ffffff;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 36px;
  transition: all 0.2s ease;
}

.dropdown-select:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
}

.dropdown-select:focus {
  outline: none;
  border-color: rgba(1, 161, 241, .65);
  box-shadow: 0 0 0 4px rgba(1, 161, 241, .18);
}

.dropdown-select option {
  background: #1a1a2e;
  color: #ffffff;
  padding: 10px;
}

.select:focus,
input[type="date"]:focus {
  outline: none;
  border-color: rgba(1,161,241,.65);
  box-shadow: 0 0 0 4px rgba(1,161,241,.18);
}

.picked {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(17,24,39,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  line-height: 1.35;
}

/* Bullets */
.bullets {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--ink);
}
.bullets li { margin: 6px 0; line-height: 1.35; }

/* Tips */
.tips {
  margin-top: 12px;
  border: 1px solid rgba(255,187,0,.55);
  background: rgba(255,187,0,.18);
  border-radius: 14px;
  padding: 10px 12px;
  line-height: 1.35;
}

/* Results */
.resultsHead {
  margin-bottom: 10px;
}

.tripBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
}

.tripBadge--vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 10px;
  width: 100%;
}

.effBox {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  margin-top: 10px;
  margin-bottom: 10px;
}

.effLabel {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.effBar {
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

.effFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-green), var(--c-yellow), var(--c-orange));
  transition: width .25s ease;
}

.effText {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
}

/* KPI cards */
.kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
.kpis--stack { grid-template-columns: 1fr !important; }

.kpi {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px 12px 10px;
  background: rgba(255,255,255,.90);
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--c-blue);
}

.kpi__label { font-size: 12px; color: var(--muted); margin-left: 4px; }
.kpi__value { font-size: 26px; font-weight: 900; margin: 4px 0 0 4px; letter-spacing: .2px; }
.kpi__sub { margin-left: 4px; font-size: 12px; }

/* Output cards for salary calculator */
.output-card {
  min-height: auto;
  padding: 12px 16px;
  height: fit-content;
}

.kpi--green::before { background: var(--c-green); }
.kpi--orange::before { background: var(--c-orange); }
.kpi--purple::before { background: var(--c-purple); }
.kpi--yellow::before { background: var(--c-yellow); }

/* Mini sections */
.miniSection {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.90);
}

.miniTitle {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 8px;
}

.rhythmRow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rhythmRow--vertical {
  flex-direction: column;
}

.rhythmPill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  font-size: 12px;
  font-weight: 800;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
}
.dot--work { background: var(--c-blue); }
.dot--off { background: var(--c-green); }
.dot--half { background: var(--c-yellow); }
.dot--holiday { background: var(--c-purple); }

.weeklyPlan {
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
}

.weekCard {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.02);
}

.weekHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.weekTitle {
  font-weight: 900;
  font-size: 13px;
}

.weekMeta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.weekList {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.35;
}
.weekList li { margin: 4px 0; }

/* Holiday list + Info box */
.holidaylist, .infobox {
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.90);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}

.holidaylist .hl-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(17,24,39,.12);
}
.holidaylist .hl-row:last-child { border-bottom: none; }

.holidaylist .hl-date {
  min-width: 140px;
  font-weight: 900;
  white-space: nowrap;
}
.holidaylist .hl-name { color: var(--ink); }

.infobox .bullets { margin: 0; padding-left: 18px; }
.infobox .bullets li { margin: 6px 0; }

/* Footer */
.footer {
  padding: 6px 2px 2px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.footer-almanya101 {
  text-align: center;
}
/* END of block: Holiday Planner Styles */



































/* News-specific styling (keeps the existing UBT shared look) */

.category-item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  cursor:pointer;
}

.category-item.is-active{
  background: rgba(255,255,255,0.08);
  outline: 1px solid rgba(255,255,255,0.16);
}

.nav-hint{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,0.78);
}

.news-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.news-thumb{
  width:86px;
  height:72px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 auto;
  background:#111827;
}

.news-title{
  font-weight:800;
  line-height:1.15;
  font-size:15px;
  margin:0 0 6px 0;
}

.news-lead{
  margin:0 0 8px 0;
  font-size:13px;
  color:#0b1220;
  opacity:0.8;
}

.news-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:#6b7280;
  margin-bottom: 12px;
}

.news-meta span{
  white-space:nowrap;
}

.loadmore-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:14px 0 6px;
}

.loadmore-btn{
  width:100%;
  max-width:355px;
  border:0;
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
  background:#111827;
  color:#ffffff;
}

.loadmore-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.list-status{
  font-size:12px;
  color:#6b7280;
}

.detail-card{
  position: relative;
  overflow: visible;
  padding: 22px !important;
  padding-bottom: 22px !important; /* Override widget space */
  margin-bottom: 0;
}

.detail-cover{
  width:100%;
  height:auto;
  max-height: 300px;
  border-radius:14px;
  object-fit:cover;
  margin: 0 0 14px 0;
  display: block;
}

.detail-category{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(0,0,0,.06);
  color: #111827;
  margin-bottom: 12px;
}

.detail-title{
  margin:0 0 10px 0;
  font-size:20px;
  line-height:1.25;
  font-weight:900;
  color: #111827;
}

.detail-lead{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.5;
  color:#111827;
  opacity:0.85;
}

.detail-content{
  font-size:15px;
  line-height:1.7;
  color:#111827;
  margin: 0 0 0 0;
}

.detail-content p{
  margin: 0 0 14px 0;
}

.detail-content p:last-child{
  margin-bottom: 0;
}

.detail-actions{
  display:flex;
  gap:10px;
  margin: 20px 0 0 0;
  flex-wrap: wrap;
  padding-top: 0;
}

.action-btn{
  flex:1;
  min-width: 200px;
  border:0;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
  background:#25D366;
  color:#ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.action-btn:hover{
  background:#20BA5A;
}

.action-link{
  flex:1;
  min-width: 200px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  background:#111827;
  color:#ffffff;
  transition: background 0.2s ease;
}

.action-link:hover{
  background:#1f2937;
}

/* =====================================================
   ALMANYA101.DE - Premium Modern Design
   (Migrated from styles/main.css)
   ===================================================== */

/* =====================================================
   CSS VARIABLES & RESET - ALMANYA 🇩🇪 + TÜRKIYE 🇹🇷
   ===================================================== */
:root {
    /* Primary Color Palette - Almanya + Türkiye */
    --yellow-primary: #F2C94C;    /* Soft Yellow - Almanya flag */
    --black-primary: #000000;     /* Siyah - Dominant */
    --red-accent: #D00000;        /* Kırmızı - CTA & Türkiye flag */
    --white-primary: #FFFFFF;     /* Beyaz - Spacing */

    /* Backgrounds */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-card: rgba(26, 26, 26, 0.8);
    --bg-card-hover: rgba(242, 201, 76, 0.12);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #b8b8b8;
    --text-muted: #888888;
    --text-highlight: #F2C94C;

    /* Accent Colors */
    --accent-primary: #F2C94C;     /* Yellow primary */
    --accent-secondary: #FFD966;   /* Lighter yellow */
    --accent-tertiary: #D00000;    /* Red accent */
    --accent-success: #10b981;
    --accent-warning: #F2C94C;

    /* Gradients - Almanya Colors */
    --gradient-primary: linear-gradient(135deg, #F2C94C 0%, #FFD966 50%, #D00000 100%);
    --gradient-secondary: linear-gradient(135deg, #F2C94C 0%, #FFD966 100%);
    --gradient-orb-1: radial-gradient(circle, rgba(242, 201, 76, 0.25) 0%, transparent 70%);
    --gradient-orb-2: radial-gradient(circle, rgba(255, 217, 102, 0.2) 0%, transparent 70%);
    --gradient-orb-3: radial-gradient(circle, rgba(208, 0, 0, 0.15) 0%, transparent 70%);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(242, 201, 76, 0.4);

    /* Glassmorphism */
    --glass-bg: rgba(26, 26, 26, 0.6);
    --glass-border: rgba(242, 201, 76, 0.2);
    --glass-blur: 20px;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
}

/* Reset & Base Styles (scoped to avoid conflicts) */
/* Note: Global reset already exists at top of file (* { margin:0; padding:0; box-sizing:border-box; }) */

/* Body styles - only apply if not already set */
body:not([style*="background"]) {
    font-family: var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow: hidden;
}

/* =====================================================
   TYPOGRAPHY (scoped to avoid conflicts with existing styles)
   ===================================================== */
/* Preserve existing hero-card1 and nav-card styles - DO NOT override */
/* Typography for zqa/qa.html hero section only - NOT for hero-card1 or nav-card */
.hero:not(.hero-card1):not(.nav-card) h1,
.hero:not(.hero-card1):not(.nav-card) h2,
.hero:not(.hero-card1):not(.nav-card) h3,
.hero:not(.hero-card1):not(.nav-card) h4,
.hero:not(.hero-card1):not(.nav-card) h5,
.hero:not(.hero-card1):not(.nav-card) h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.hero:not(.hero-card1):not(.nav-card) h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.hero:not(.hero-card1):not(.nav-card) h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.hero:not(.hero-card1):not(.nav-card) h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

/* =====================================================
   NAVIGATION (for zqa/qa.html navbar - scoped to .navbar)
   ===================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    padding: var(--spacing-md) 0;
    backdrop-filter: blur(var(--glass-blur));
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    transition: all var(--transition-base);
}

.navbar.nav-hidden {
    transform: translateY(-120%);
}

.navbar.scrolled {
    padding: var(--spacing-sm) 0;
    background: rgba(10, 10, 10, 0.95);
    box-shadow: var(--shadow-lg), 0 1px 0 rgba(242, 201, 76, 0.1);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.navbar .nav-logo a {
    display: flex;
    align-items: center;
    font-size: 1.75rem;
    font-family: var(--font-display);
    font-weight: 700;
    transition: transform var(--transition-base);
}

.navbar .nav-logo a:hover {
    transform: scale(1.05);
}

.logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-highlight {
    color: var(--yellow-primary);
    text-shadow: 0 0 10px rgba(242, 201, 76, 0.3);
}

.logo-dot {
    color: var(--red-accent);
}

.logo-de {
    color: var(--text-secondary);
    font-weight: 500;
}

.navbar .nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    justify-content: center;
}

.navbar .nav-item {
    position: relative;
}

.nav-separator {
    width: 1px;
    height: 40px;
    background: var(--glass-border);
    margin: 0 0.25rem;
    align-self: center;
}

.navbar .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-base);
    text-align: center;
}

.navbar .nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.navbar .nav-link i:not(.fa-chevron-down) {
    font-size: 1.25rem;
}

.navbar .nav-link .fa-chevron-down {
    font-size: 0.625rem;
    margin-top: 0.125rem;
    transition: transform var(--transition-base);
}

.navbar .nav-item:hover .fa-chevron-down {
    transform: rotate(180deg);
}

/* Dropdown Menu (scoped to .navbar) */
.navbar .dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 250px;
    padding: var(--spacing-sm);
    background: rgba(10, 10, 10, 0.98); /* Solid background for readability */
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    z-index: var(--z-dropdown);
}

.dropdown-menu-large {
    min-width: 300px;
}

.navbar .nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.navbar .dropdown-item:hover {
    color: var(--text-primary);
    background: var(--bg-card);
    transform: translateX(4px);
}

.navbar .dropdown-item i {
    width: 20px;
    font-size: 1rem;
    color: var(--accent-primary);
}

/* Nav Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #25D366; /* WhatsApp Green */
    color: white;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.8125rem;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.3);
    border: 1px solid rgba(37, 211, 102, 0.5);
    transition: all var(--transition-base);
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: #20BA5A; /* Darker WhatsApp green on hover */
    box-shadow: 0 0 30px rgba(37, 211, 102, 0.6);
}

.btn-primary i.fa-whatsapp {
    font-size: 1.125rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1100;
    position: relative;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

/* Hamburger Animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* =====================================================
   HERO SECTION (for zqa/qa.html - scoped to avoid conflicts)
   ===================================================== */
.hero:not(.hero-card1) {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(80px + var(--spacing-3xl)) var(--spacing-xl) var(--spacing-3xl);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(ellipse at top, rgba(242, 201, 76, 0.08) 0%, var(--bg-primary) 50%);
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 20s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    top: -200px;
    left: -100px;
    background: var(--gradient-orb-1);
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    top: 50%;
    right: -150px;
    background: var(--gradient-orb-2);
    animation-delay: 7s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: 50%;
    background: var(--gradient-orb-3);
    animation-delay: 14s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

#particlesCanvas {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

.hero-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

.hero-logo-lockup {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    font-size: clamp(2rem, 4vw, 3rem);
    font-family: var(--font-display);
    font-weight: 700;
}

.hero-tagline {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: var(--text-secondary);
    max-width: 720px;
    line-height: 1.6;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    animation: pulse 2s ease-in-out infinite;
}

.hero-badge i {
    color: var(--accent-warning);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(242, 201, 76, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(242, 201, 76, 0);
    }
}

.hero-title {
    margin-bottom: var(--spacing-lg);
    line-height: 1.1;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto var(--spacing-2xl);
    line-height: 1.7;
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
    flex-wrap: wrap;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-radius: var(--radius-xl);
    font-size: 1.125rem;
    font-weight: 600;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2), transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.btn-hero:hover::before {
    transform: translateX(100%);
}

.btn-hero-primary {
    background: var(--gradient-primary); /* Yellow to Red gradient */
    color: var(--black-primary); /* Black text for readability */
    box-shadow: 0 4px 20px rgba(242, 201, 76, 0.4);
    border: 1px solid rgba(242, 201, 76, 0.3);
}

.btn-hero-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(242, 201, 76, 0.6);
}

.btn-hero-secondary {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--yellow-primary);
    color: var(--text-primary);
}

.btn-hero-secondary:hover {
    background: rgba(242, 201, 76, 0.15);
    border-color: var(--accent-secondary);
    transform: translateY(-4px);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3xl);
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    font-family: var(--font-display);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Hero Social Links */
.hero-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.hero-social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 1.125rem;
    transition: all var(--transition-base);
}

.hero-social a:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(242, 201, 76, 0.2);
}

/* =====================================================
   SECTIONS
   ===================================================== */
section {
    padding: var(--spacing-3xl) var(--spacing-xl);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

/* .section-title already defined earlier in file - do not override */
/* Only apply to zqa/qa.html sections, not to existing .section-title */
.hero:not(.hero-card1):not(.nav-card) /* .section-title already defined earlier in file (line 173, 261) - do not override */
/* Only apply to zqa/qa.html sections, not to existing .section-title */
.hero:not(.hero-card1):not(.nav-card) .section-title {
    margin-bottom: var(--spacing-lg);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* =====================================================
   CATEGORIES SECTION
   ===================================================== */


.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--spacing-lg);
    align-items: stretch;
}

.category-card {
    position: relative;
    padding: var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 230px;
}

@media (min-width: 768px) {
    .category-card {
        padding: var(--spacing-xl);
    }
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.category-card:hover {
    transform: translateY(-8px);
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-xl), 0 0 30px rgba(242, 201, 76, 0.2);
}

.category-card:hover::before {
    opacity: 1;
}

.category-card-featured {
    background: linear-gradient(135deg, rgba(242, 201, 76, 0.15) 0%, rgba(208, 0, 0, 0.1) 100%);
    border: 2px solid var(--accent-primary);
}

.featured-badge {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--accent-warning);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
}

@media (min-width: 768px) {
    .category-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
}

.category-card:hover .category-icon {
    transform: scale(1.1) rotate(5deg);
}

.icon-news {
    background: linear-gradient(135deg, rgba(242, 201, 76, 0.25) 0%, rgba(255, 217, 102, 0.2) 100%);
    color: var(--yellow-primary);
}

.icon-tools {
    background: linear-gradient(135deg, rgba(242, 201, 76, 0.2) 0%, rgba(208, 0, 0, 0.15) 100%);
    color: #FFD966;
}

.icon-qa {
    background: linear-gradient(135deg, rgba(208, 0, 0, 0.25) 0%, rgba(255, 50, 50, 0.2) 100%);
    color: var(--red-accent);
}

.icon-insurance {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
    color: #10b981; /* Keep green for insurance (success/security) */
}

.icon-blog {
    background: linear-gradient(135deg, rgba(255, 217, 102, 0.25) 0%, rgba(242, 201, 76, 0.2) 100%);
    color: #FFD966;
}

.icon-events {
    background: linear-gradient(135deg, rgba(208, 0, 0, 0.2) 0%, rgba(180, 0, 0, 0.15) 100%);
    color: #FF4444;
}

.icon-expert {
    background: linear-gradient(135deg, rgba(242, 201, 76, 0.3) 0%, rgba(208, 0, 0, 0.2) 100%);
    color: var(--yellow-primary);
}

.icon-documents {
    background: linear-gradient(135deg, rgba(255, 217, 102, 0.2) 0%, rgba(242, 201, 76, 0.15) 100%);
    color: #F2C94C;
}

.icon-bank {
    background: linear-gradient(135deg, rgba(242, 201, 76, 0.25) 0%, rgba(255, 217, 102, 0.2) 100%);
    color: var(--yellow-primary);
}

.icon-holiday {
    background: linear-gradient(135deg, rgba(255, 217, 102, 0.25) 0%, rgba(242, 201, 76, 0.2) 100%);
    color: #FFD966;
}

.icon-transfer {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.2) 100%);
    color: #10b981;
}

.icon-whatsapp {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.25) 0%, rgba(32, 186, 90, 0.2) 100%);
    color: #25D366;
}

.icon-contact {
    background: linear-gradient(135deg, rgba(242, 201, 76, 0.25) 0%, rgba(208, 0, 0, 0.15) 100%);
    color: var(--yellow-primary);
}

.category-title {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 768px) {
    .category-title {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-md);
    }
}

.category-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
    font-size: 0.875rem;

    max-height: calc(1.6em * 2);
    overflow: hidden;
}


@media (min-width: 768px) {
    .category-description {
        font-size: 1rem;
        margin-bottom: var(--spacing-lg);
        line-height: 1.7;
    }
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.tag {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.category-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-top: auto;
}

.category-link:visited,
.category-link:active {
    color: var(--accent-primary);
}

.category-link i {
    transition: transform var(--transition-base);
}

.category-card:hover .category-link i {
    transform: translateX(4px);
}

/* =====================================================
   POPULAR TOPICS
   ===================================================== */
.popular-topics {
    /* background kept as primary for contrast */
    background: var(--bg-primary);
}

.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.topic-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.topic-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.topic-card i:first-child {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 1.125rem;
}

.topic-card span {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
}

.topic-card i:last-child {
    color: var(--text-muted);
    transition: transform var(--transition-base);
}

.topic-card:hover i:last-child {
    transform: translateX(4px);
    color: var(--accent-primary);
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.cta-section {
    padding: var(--spacing-3xl) var(--spacing-xl);
}

.cta-card {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
}

.cta-image-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cta-image-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.85) 0%, rgba(26, 26, 26, 0.9) 100%);
}

.cta-content {
    position: relative;
    z-index: 1;
    padding: var(--spacing-3xl) var(--spacing-2xl);
    text-align: center;
}

.cta-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.cta-text {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: var(--spacing-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

.cta-action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition-base);
    text-align: left;
}

.cta-action-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(242, 201, 76, 0.15);
}

.cta-action-btn i {
    font-size: 1.5rem;
    color: var(--accent-primary);
    min-width: 24px;
}

.cta-action-btn:hover i {
    color: var(--accent-secondary);
}

@media (max-width: 768px) {
    .cta-actions {
        grid-template-columns: 1fr;
    }

    .cta-content {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
    background: var(--bg-secondary);
    padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
    border-top: 1px solid var(--glass-border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl);
}

.footer-logo {
    font-size: 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
}

.footer-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
}

.social-links {
    display: flex;
    gap: var(--spacing-md);
}

.social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.social-links a:hover {
    background: var(--yellow-primary);
    color: var(--black-primary);
    border-color: var(--yellow-primary);
    transform: translateY(-4px);
}

.footer-title {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-links a {
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.footer-links a:hover {
    color: var(--accent-primary);
    transform: translateX(4px);
}

.footer-bottom {
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.footer-bottom i {
    color: var(--accent-tertiary);
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */
@media (max-width: 1024px) {
    .navbar .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: var(--spacing-lg);
        z-index: var(--z-modal);
        padding: calc(var(--spacing-3xl) + 80px) var(--spacing-xl) var(--spacing-3xl);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
        overflow-y: auto;
    }

    .navbar .nav-menu.active {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    .navbar .nav-item {
        width: 100%;
        text-align: center;
        max-width: 520px;
        margin: 0 auto;
    }

    .navbar .nav-link {
        font-size: 1.25rem;
        padding: var(--spacing-lg);
        justify-content: center;
    }

    .navbar .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: var(--spacing-md);
        background: rgba(26, 26, 26, 0.8);
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .cta-card {
        grid-template-columns: 1fr;
    }

    .cta-image {
        min-height: 200px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero:not(.hero-card1) .hero-cta {
        flex-direction: column;
    }

    .hero:not(.hero-card1) .hero-stats {
        gap: var(--spacing-xl);
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .topics-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .navbar .nav-container {
        padding: 0 var(--spacing-lg);
    }

    .btn-primary span {
        display: none;
    }

    .hero:not(.hero-card1) {
        padding: calc(80px + var(--spacing-2xl)) var(--spacing-lg) var(--spacing-2xl);
    }

    section {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
}
/* END of block: ALMANYA101.DE - Premium Modern Design */

/* =====================================================
   FOOTER STYLE
   ===================================================== */
.footer-almanya101 {
  text-align: center;
  margin: 24px 0 16px 0;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.6px;
  line-height: 1.6;
}

.footer-almanya101 a {
  color: #a9b4d6;
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 180, 214, 0.5);
  transition: all 0.2s ease;
}

.footer-almanya101 a:hover {
  color: #e9eefc;
  border-bottom-color: #e9eefc;
}

.footer-almanya101 .footer-divider {
  margin: 0 4px;
  opacity: 0.6;
}
/* END of block: Footer Style */

/* =====================================================
   GLOBAL CARD WIDTH LOCK
   - Keep all cards at mobile-width even on desktop
   ===================================================== */
:root {
  --card-mobile-width: 355px;
}

.card,
.detail-card,
[class*="card"]:not(.card-buttons):not(.hb-card-buttons):not(.footer-blue-card__buttons):not(.contact-card-buttons):not(.card-title):not(.card-sub):not(.card-head):not(.card-foot) {
  width: var(--card-mobile-width);
  min-width: var(--card-mobile-width);
  max-width: var(--card-mobile-width);
  margin-left: auto;
  margin-right: auto;
}