/* Ayvalık FM V3 — üst menü + hero. Slider görselleri arkada döner, metinler HTML katmanıdır. */
:root{
  --h3-cyan:#21d9e8;
  --h3-cyan-2:#35e6f1;
  --h3-bg:#03111f;
  --h3-line:rgba(255,255,255,.20);
}
body{background:#03111f}

/* HEADER */
.hero3-topbar{
  position:fixed;z-index:9990;top:0;left:0;right:0;
  display:grid;grid-template-columns:260px 1fr auto;align-items:center;gap:28px;
  width:100%;max-width:1540px;margin:0 auto;padding:20px 42px;
  color:#fff;background:linear-gradient(180deg,rgba(1,11,22,.74) 0%,rgba(1,11,22,.24) 72%,transparent 100%);
  transition:background .22s ease,backdrop-filter .22s ease,box-shadow .22s ease,padding .22s ease;
}

.hero3-topbar.scrolled{
  background:rgba(2,14,27,.94);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  padding-top:11px;
  padding-bottom:11px;
}
/* Sağdaki eski “Şu an çalan” kartı kesin olarak kapalı. */
.hero3-now{display:none!important;}

.hero3-brand{display:flex;flex-direction:column;align-items:flex-start;color:#fff;text-decoration:none;line-height:1;min-width:220px}
.hero3-wave{font-size:13px;letter-spacing:-1px;margin-left:56px;margin-bottom:3px;color:#fff;opacity:.95}
.hero3-logo{font-size:27px;font-weight:900;letter-spacing:.7px;text-shadow:0 2px 10px rgba(0,0,0,.28)}
.hero3-logo b{color:var(--h3-cyan)}
.hero3-brand small{font-family:inherit;font-size:11px;font-weight:700;opacity:.88;margin-top:7px;letter-spacing:.12px;white-space:nowrap}

.hero3-nav{display:flex;justify-content:center;align-items:center;gap:31px;min-width:0}
.hero3-nav a{position:relative;color:rgba(255,255,255,.92);font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap;padding:15px 0 18px}
.hero3-nav a:hover,.hero3-nav a.active{color:var(--h3-cyan)}
.hero3-nav a.active:after{content:"";position:absolute;left:-7px;right:-7px;bottom:4px;height:2px;border-radius:20px;background:var(--h3-cyan);box-shadow:0 0 10px rgba(33,217,232,.35)}

.hero3-actions{display:flex;align-items:center;gap:10px}
.hero3-icon-btn,.hero3-lang{width:42px;height:42px;border:1px solid var(--h3-line);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(3,17,31,.32);text-decoration:none;font-size:21px;backdrop-filter:blur(9px);cursor:pointer;transition:.2s ease}
.hero3-icon-btn:hover,.hero3-lang:hover{border-color:var(--h3-cyan);color:var(--h3-cyan);background:rgba(33,217,232,.08)}
.hero3-lang{padding:0}.hero3-lang .v2-lang-globe{font-size:16px}.hero3-lang .v2-lang-code{display:none}.hero3-lang-wrap{position:relative}.hero3-lang-wrap .v2-lang-menu{top:50px;right:0}
.hero3-menu-toggle{display:none;background:none;border:0;width:44px;height:44px;padding:10px}.hero3-menu-toggle span{display:block;height:2px;background:#fff;margin:6px;border-radius:10px}

/* HERO */
.hero3-site{padding-top:0!important;max-width:none!important;margin:0!important}
.hero3-hero{position:relative;height:610px;min-height:580px;overflow:hidden;background:#061421;color:#fff}
.hero3-slides,.hero3-slide,.hero3-shade{position:absolute;inset:0}
.hero3-slide{opacity:0;background-position:center center;background-size:cover;transform:scale(1.015);transition:opacity .85s ease,transform 7s ease}
.hero3-slide.active{opacity:1;transform:scale(1.045)}
.hero3-shade{
  background:
    linear-gradient(90deg,rgba(0,13,27,.90) 0%,rgba(1,16,31,.72) 27%,rgba(1,16,31,.30) 54%,rgba(1,16,31,.10) 74%,rgba(1,16,31,.28) 100%),
    linear-gradient(180deg,rgba(0,10,20,.55) 0%,rgba(0,10,20,.08) 35%,rgba(0,13,26,.42) 100%);
}

.hero3-content{
  position:absolute;z-index:4;left:max(50px,calc((100% - 1460px)/2));top:150px;
  transform:none;max-width:610px;text-shadow:0 3px 18px rgba(0,0,0,.42)
}
.hero3-live-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 11px;background:rgba(4,17,30,.44);font-size:10px;font-weight:800;letter-spacing:.25px;backdrop-filter:blur(7px)}
.hero3-live-pill span{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.55)}
.hero3-content h1{font-size:59px;line-height:.98;margin:20px 0 8px;font-weight:850;letter-spacing:-2px;color:#fff}
.hero3-content h2{font-family:"Segoe Script","Brush Script MT",cursive;color:var(--h3-cyan);font-size:34px;line-height:1.08;font-weight:500;margin:0 0 16px;letter-spacing:.1px}
.hero3-content p{font-size:15px;line-height:1.48;color:rgba(255,255,255,.94);margin:0;font-weight:450}
.hero3-content p strong{font-weight:600}
.hero3-buttons{display:flex;gap:12px;align-items:center;margin-top:24px}
.hero3-primary,.hero3-secondary{height:47px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:12px;text-decoration:none;cursor:pointer;transition:.2s ease}
.hero3-primary{min-width:155px;border:0;background:var(--h3-cyan);color:#04212b;box-shadow:0 7px 22px rgba(33,217,232,.24)}
.hero3-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.hero3-secondary{min-width:172px;border:1px solid rgba(62,232,243,.72);color:#fff;background:rgba(1,14,26,.30);backdrop-filter:blur(8px)}
.hero3-secondary:hover{background:rgba(33,217,232,.10);transform:translateY(-1px)}
.hero3-play-icon{font-size:12px}.hero3-grid-icon{font-size:15px}

/* ŞU AN ÇALAN KARTI */
.hero3-now{position:absolute;z-index:4;right:max(46px,calc((100% - 1460px)/2));bottom:72px;width:330px;min-height:103px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(3,13,23,.83);display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:13px;padding:11px 13px;box-shadow:0 18px 44px rgba(0,0,0,.34);backdrop-filter:blur(12px)}
.hero3-now-cover{height:72px;border-radius:9px;background:linear-gradient(155deg,#116078,#061726);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:800;letter-spacing:.4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hero3-now-cover b{color:var(--h3-cyan)}
.hero3-now-text{display:flex;flex-direction:column;min-width:0;gap:4px}
.hero3-now-text small{color:var(--h3-cyan);font-size:9px;font-weight:800;letter-spacing:.15px}
.hero3-now-text strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero3-now-text span{font-size:11px;color:rgba(255,255,255,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero3-bars{display:flex;align-items:flex-end;gap:2px;height:22px}
.hero3-bars i{width:3px;background:var(--h3-cyan);border-radius:4px;animation:h3bar 1s ease-in-out infinite alternate}.hero3-bars i:nth-child(1){height:8px}.hero3-bars i:nth-child(2){height:18px;animation-delay:.2s}.hero3-bars i:nth-child(3){height:13px;animation-delay:.4s}.hero3-bars i:nth-child(4){height:22px;animation-delay:.1s}.hero3-bars i:nth-child(5){height:16px;animation-delay:.3s}@keyframes h3bar{to{height:6px}}

/* SLIDER NOKTALARI */
.hero3-dots{position:absolute;z-index:5;left:50%;bottom:25px;transform:translateX(-50%);display:flex;gap:8px}
.hero3-dots button{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.42);cursor:pointer;box-shadow:0 0 0 5px transparent}
.hero3-dots button.active{background:var(--h3-cyan);box-shadow:0 0 11px rgba(33,217,232,.58)}
.hero3-hero + .v2-stack{margin-top:0!important}

@media(max-width:1160px){
  .hero3-topbar{grid-template-columns:220px 1fr auto;padding:18px 25px;gap:18px}.hero3-nav{gap:20px}.hero3-nav a{font-size:11px}
  .hero3-content{left:30px}.hero3-now{right:30px}
}
@media(max-width:980px){
  .hero3-topbar{grid-template-columns:1fr auto auto;padding:18px 22px}.hero3-nav{position:absolute;display:none;top:76px;left:18px;right:18px;flex-direction:column;align-items:stretch;gap:0;padding:12px;background:rgba(2,13,25,.97);border:1px solid rgba(255,255,255,.13);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.35)}.hero3-nav.open{display:flex}.hero3-nav a{padding:13px 10px;font-size:13px}.hero3-nav a.active:after{display:none}.hero3-menu-toggle{display:block}.hero3-actions .hero3-theme,.hero3-actions>a{display:none}
  .hero3-content{top:145px}.hero3-now{bottom:50px;width:300px}
}
@media(max-width:760px){
  .hero3-topbar{padding:15px 18px;grid-template-columns:1fr auto auto}.hero3-brand .hero3-logo{font-size:22px}.hero3-brand small{font-size:12px}.hero3-actions{gap:4px}.hero3-lang{width:40px;height:40px}
  .hero3-hero{height:690px;min-height:690px}.hero3-shade{background:linear-gradient(180deg,rgba(2,13,25,.58),rgba(2,13,25,.16) 31%,rgba(2,13,25,.72) 62%,rgba(2,13,25,.96))}.hero3-slide{background-position:center center}
  .hero3-content{left:20px;right:20px;top:auto;bottom:153px;max-width:none}.hero3-live-pill{font-size:9px;padding:6px 9px}.hero3-content h1{font-size:44px;margin-top:16px}.hero3-content h2{font-size:27px;margin-bottom:13px}.hero3-content p{font-size:13px}.hero3-buttons{margin-top:18px}.hero3-primary,.hero3-secondary{height:44px;padding:0 15px;font-size:11px;min-width:0}
  .hero3-now{left:20px;right:20px;bottom:22px;width:auto;min-height:88px;grid-template-columns:62px 1fr auto;padding:9px}.hero3-now-cover{height:62px}.hero3-dots{bottom:124px}.hero3-bars{display:none}
}
@media(max-width:430px){
  .hero3-secondary{display:none}.hero3-content{bottom:143px}.hero3-content h1{font-size:40px}.hero3-content h2{font-size:24px}.hero3-hero{height:645px;min-height:645px}.hero3-now{bottom:16px}.hero3-dots{bottom:112px}
}
@media(prefers-reduced-motion:reduce){.hero3-slide{transition:opacity .2s;transform:none!important}.hero3-bars i{animation:none}}


/* V3 Kategoriler — orijinal Ayvalık FM kategori yapısı korunur */
.hero3-categories{background:#061626;padding:26px clamp(20px,4vw,64px) 30px;border-top:1px solid rgba(255,255,255,.055)}
.hero3-section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 auto 16px;max-width:1600px}
.hero3-section-head h2{margin:0;color:#fff;font-size:clamp(20px,1.7vw,28px);font-weight:800;letter-spacing:-.02em}
.hero3-section-head a{color:#d8e6ef;text-decoration:none;font-size:14px;white-space:nowrap;transition:color .2s ease}
.hero3-section-head a:hover{color:#27d7e8}
.hero3-category-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hero3-category-card{position:relative;overflow:hidden;min-height:92px;border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:16px 15px;display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;isolation:isolate;transition:transform .18s ease,border-color .18s ease,filter .18s ease}
.hero3-category-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 60%)}
.hero3-category-card:hover{transform:translateY(-2px);border-color:rgba(48,220,235,.5);filter:brightness(1.06)}
.hero3-cat-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.12);font-size:30px;font-weight:800;line-height:1}
.hero3-cat-copy{min-width:0;display:flex;flex-direction:column;gap:5px}
.hero3-cat-copy strong{font-size:14px;line-height:1.05;letter-spacing:.01em;white-space:normal}
.hero3-cat-copy small{color:rgba(255,255,255,.72);font-size:12px}
.cat-music{background:linear-gradient(135deg,#4f176e,#17284c)}
.cat-world{background:linear-gradient(135deg,#00687c,#12364b)}
.cat-road{background:linear-gradient(135deg,#704117,#263b55)}
.cat-nostalgia{background:linear-gradient(135deg,#6d1d68,#28305c)}
.cat-party{background:linear-gradient(135deg,#8c2a21,#3c223d)}
.cat-rock{background:linear-gradient(135deg,#651c2d,#222841)}
.cat-games{background:linear-gradient(135deg,#916315,#4f2830)}
.cat-discover{background:linear-gradient(135deg,#0e5372,#212c55)}
.cat-kids{background:linear-gradient(135deg,#a36d08,#544519)}
.cat-calm{background:linear-gradient(135deg,#285f28,#183c36)}
@media(max-width:1100px){.hero3-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.hero3-categories{padding:20px 16px 24px}.hero3-category-grid{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding-bottom:5px;scrollbar-width:none}.hero3-category-grid::-webkit-scrollbar{display:none}.hero3-category-card{flex:0 0 158px;min-height:88px;scroll-snap-align:start;padding:14px 12px}.hero3-cat-icon{flex-basis:40px;width:40px;height:40px;font-size:25px}.hero3-cat-copy strong{font-size:12px}.hero3-cat-copy small{font-size:11px}}


/* GEDİZ kimliği + slider */
.hero3-gediz-id{display:inline-flex;align-items:baseline;gap:9px;margin-top:13px;padding:7px 10px;border-left:2px solid var(--h3-cyan);background:rgba(2,16,29,.30);backdrop-filter:blur(6px);border-radius:0 8px 8px 0}
.hero3-gediz-id strong{font-size:13px;letter-spacing:1.2px;color:var(--h3-cyan);font-weight:900}
.hero3-gediz-id span{font-size:11px;color:rgba(255,255,255,.88);font-weight:650}
.hero3-slide-gediz{background-position:center center!important}
.hero3-actions{min-width:46px;justify-content:flex-end}
@media(max-width:760px){.hero3-brand small{font-size:9.5px;margin-top:5px}.hero3-gediz-id{margin-top:10px;gap:7px;padding:6px 8px}.hero3-gediz-id strong{font-size:11px}.hero3-gediz-id span{font-size:9.5px}.hero3-slide-gediz{background-position:67% center!important}}

/* =========================================================
   MOBILE UX PASS 2026-08-22
   Amaç: ilk ekranda hero daha kısa, metin daha yukarıda ve
   kategori başlangıcı daha erken görünür. Desktop etkilenmez.
   ========================================================= */
@media (max-width:760px){
  /* Header biraz daha kompakt; dokunma alanları korunur. */
  .hero3-topbar{
    padding:12px 14px;
    min-height:76px;
    background:linear-gradient(180deg,rgba(1,11,22,.90),rgba(1,11,22,.58) 72%,rgba(1,11,22,.08));
  }
  .hero3-topbar.scrolled{padding-top:9px;padding-bottom:9px}
  .hero3-brand{min-width:0}
  .hero3-brand .hero3-logo{font-size:21px}
  .hero3-brand small{font-size:9px;line-height:1.2;margin-top:5px}
  .hero3-menu-toggle{width:44px;height:44px}
  .hero3-lang{width:44px;height:44px}

  /* Hero: 690px yerine daha kompakt bir ilk ekran. */
  .hero3-hero{
    height:520px;
    min-height:520px;
  }
  .hero3-shade{
    background:
      linear-gradient(180deg,rgba(2,13,25,.58) 0%,rgba(2,13,25,.16) 27%,rgba(2,13,25,.48) 55%,rgba(2,13,25,.92) 100%),
      linear-gradient(90deg,rgba(2,13,25,.48),rgba(2,13,25,.08) 72%);
  }

  /* Metin aşağıya yaslanmak yerine üst-orta bölüme taşındı. */
  .hero3-content{
    left:18px;
    right:18px;
    top:122px;
    bottom:auto;
    max-width:430px;
  }
  .hero3-live-pill{font-size:8.5px;padding:5px 8px}
  .hero3-gediz-id{margin-top:8px;padding:5px 7px;gap:6px}
  .hero3-gediz-id strong{font-size:10.5px}
  .hero3-gediz-id span{font-size:9px}
  .hero3-content h1{
    font-size:39px;
    line-height:1;
    margin:13px 0 6px;
    letter-spacing:-1.4px;
  }
  .hero3-content h2{
    font-size:23px;
    line-height:1.05;
    margin-bottom:10px;
  }
  .hero3-content p{font-size:12.5px;line-height:1.35}
  .hero3-buttons{margin-top:14px;gap:8px}
  .hero3-primary,.hero3-secondary{height:42px;padding:0 14px;font-size:10.5px}

  /* Slider noktaları içerikten bağımsız, altta küçük ve sakin. */
  .hero3-dots{bottom:15px;gap:7px}
  .hero3-dots button{width:7px;height:7px}

  /* 16:9 Ayvalık görsellerinin mobil kırpmasını yumuşat. */
  .hero3-slide{background-size:cover;transform:scale(1.01)}
  .hero3-slide.active{transform:scale(1.025)}
  .hero3-slide:nth-child(1){background-position:50% 48%}
  .hero3-slide:nth-child(2){background-position:52% 50%}
  .hero3-slide:nth-child(3){background-position:48% 50%}
  .hero3-slide:nth-child(4){background-position:54% 50%}

  /* Gediz için projede zaten bulunan gerçek dikey mobil görsel kullanılır. */
  .hero3-slide-gediz{
    background-image:url('../images/hero-gediz-mobile.png')!important;
    background-position:center 37%!important;
    background-size:cover!important;
  }

  /* Kategoriler hero'nun hemen arkasından daha sıkı başlar. */
  .hero3-categories{
    padding:14px 14px 18px;
  }
  .hero3-section-head{margin-bottom:10px}
  .hero3-section-head h2{font-size:19px}
  .hero3-section-head a{font-size:12px}
  .hero3-category-grid{gap:9px}
  .hero3-category-card{
    flex:0 0 150px;
    min-height:78px;
    padding:11px 10px;
    border-radius:10px;
  }
  .hero3-cat-icon{flex-basis:36px;width:36px;height:36px;font-size:22px;border-radius:10px}
  .hero3-cat-copy strong{font-size:11.5px}
  .hero3-cat-copy small{font-size:10.5px}
}

@media (max-width:430px){
  .hero3-hero{height:500px;min-height:500px}
  .hero3-content{top:116px;left:16px;right:16px}
  .hero3-content h1{font-size:36px}
  .hero3-content h2{font-size:21px}
  .hero3-content p{font-size:12px}
  .hero3-secondary{display:none}
  .hero3-primary{height:41px;padding:0 15px;font-size:10.5px}
  .hero3-categories{padding-top:12px}
}

/* =========================================================
   MOBILE HEADER BELOW HERO — 2026-08-22
   Yalnizca telefon: tekrar eden ust marka alani kalkar,
   menu + dil hero altina iner, hero icerigi yukari cikar.
   Desktop etkilenmez.
   ========================================================= */
@media (max-width:760px){
  /* JS bu header'i hero'nun hemen altina tasir. */
  .hero3-topbar.hero3-mobile-below{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    z-index:80;
    width:100%;
    min-height:54px;
    padding:6px 14px!important;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:10px;
    background:#041526!important;
    border-top:1px solid rgba(45,216,232,.16);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    box-shadow:none!important;
  }
  .hero3-topbar.hero3-mobile-below .hero3-brand{display:none!important}
  .hero3-topbar.hero3-mobile-below .hero3-menu-toggle{
    grid-column:1;
    grid-row:1;
    justify-self:stretch;
    width:100%;
    height:42px;
    padding:0 14px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(255,255,255,.035);
  }
  .hero3-topbar.hero3-mobile-below .hero3-menu-toggle span{
    width:18px;
    height:2px;
    margin:2px 0;
  }
  .hero3-topbar.hero3-mobile-below .hero3-actions{
    grid-column:2;
    grid-row:1;
    width:100%;
    min-width:0;
    display:block;
  }
  .hero3-topbar.hero3-mobile-below .hero3-lang-wrap{width:100%}
  .hero3-topbar.hero3-mobile-below .hero3-lang{
    width:100%;
    height:42px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:12px;
    border-color:rgba(45,216,232,.34);
    background:rgba(45,216,232,.055);
  }
  .hero3-topbar.hero3-mobile-below .hero3-lang .v2-lang-code{
    display:inline!important;
    font-size:12px;
    font-weight:850;
    color:#fff;
  }
  .hero3-topbar.hero3-mobile-below .hero3-lang-wrap .v2-lang-menu{
    top:48px;
    right:0;
    left:auto;
    width:min(250px,calc(100vw - 28px));
    z-index:140;
  }
  .hero3-topbar.hero3-mobile-below .hero3-nav{
    top:52px;
    left:14px;
    right:14px;
    z-index:130;
  }

  /* Ust marka kaldigi icin hero metni gercekten yukariya gelir. */
  .hero3-hero{height:455px;min-height:455px}
  .hero3-content{
    top:34px!important;
    bottom:auto!important;
    left:16px;
    right:16px;
  }
  .hero3-content h1{margin-top:11px}
  .hero3-buttons{margin-top:12px;display:flex;gap:8px;flex-wrap:nowrap}
  .hero3-primary,.hero3-secondary{
    height:40px;
    flex:1 1 0;
    min-width:0;
    padding:0 10px;
    font-size:10px;
    white-space:nowrap;
    justify-content:center;
  }
  .hero3-secondary{display:inline-flex!important}
  .hero3-dots{bottom:12px}

  /* Kontrol satirindan sonra kategori hemen baslar. */
  .hero3-categories{padding-top:11px!important}
}

@media (max-width:430px){
  .hero3-hero{height:438px;min-height:438px}
  .hero3-content{top:28px!important}
  .hero3-content h1{font-size:35px}
  .hero3-content h2{font-size:20px}
  .hero3-content p{font-size:11.5px;line-height:1.32}
  .hero3-live-pill{font-size:8px;padding:5px 7px}
  .hero3-gediz-id{padding:5px 6px;gap:5px;margin-top:6px}
  .hero3-gediz-id strong{font-size:10px}
  .hero3-gediz-id span{font-size:8.5px}
  .hero3-primary,.hero3-secondary{height:39px;font-size:9.5px;padding:0 8px}
}

@media (max-width:360px){
  .hero3-hero{height:430px;min-height:430px}
  .hero3-content{left:13px;right:13px;top:25px!important}
  .hero3-content h1{font-size:33px}
  .hero3-content h2{font-size:19px}
  .hero3-primary,.hero3-secondary{font-size:8.8px;padding:0 6px}
  .hero3-topbar.hero3-mobile-below{padding-left:10px!important;padding-right:10px!important;gap:8px}
}


/* =========================================================
   MOBILE COMPACT HERO + FLOATING CONTROLS — 2026-08-22
   Telefon ana sayfa: tekrar eden marka alani yok; menu ve dil
   kucuk butonlar halinde sag ustte. Hero bir kademe daha kisa.
   ========================================================= */
@media (max-width:760px){
  .hero3-topbar.hero3-mobile-float{
    position:absolute!important;
    top:9px!important;
    right:10px!important;
    left:auto!important;
    width:auto!important;
    min-height:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    z-index:120;
  }
  .hero3-topbar.hero3-mobile-float .hero3-brand{display:none!important}
  .hero3-topbar.hero3-mobile-float .hero3-menu-toggle{
    order:1;
    display:block!important;
    width:38px!important;
    height:38px!important;
    padding:8px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:11px!important;
    background:rgba(2,15,27,.58)!important;
    backdrop-filter:blur(10px);
  }
  .hero3-topbar.hero3-mobile-float .hero3-menu-toggle span{
    width:18px!important;
    height:2px!important;
    margin:4px auto!important;
  }
  .hero3-topbar.hero3-mobile-float .hero3-actions{
    order:2;
    min-width:0!important;
    width:auto!important;
    display:flex!important;
  }
  .hero3-topbar.hero3-mobile-float .hero3-lang-wrap{width:auto!important}
  .hero3-topbar.hero3-mobile-float .hero3-lang{
    width:46px!important;
    height:38px!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    border-radius:11px!important;
    background:rgba(2,15,27,.58)!important;
    border-color:rgba(45,216,232,.40)!important;
    backdrop-filter:blur(10px);
  }
  .hero3-topbar.hero3-mobile-float .hero3-lang .v2-lang-globe{font-size:14px!important}
  .hero3-topbar.hero3-mobile-float .hero3-lang .v2-lang-code{
    display:inline!important;
    font-size:9px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  .hero3-topbar.hero3-mobile-float .hero3-lang-wrap .v2-lang-menu{
    top:43px!important;
    right:0!important;
    left:auto!important;
    width:min(220px,calc(100vw - 20px))!important;
    z-index:150!important;
  }
  .hero3-topbar.hero3-mobile-float .hero3-nav{
    position:absolute!important;
    top:44px!important;
    right:52px!important;
    left:auto!important;
    width:min(250px,calc(100vw - 72px))!important;
    z-index:145!important;
  }

  /* Onceki hero-altindaki kontrol satirinin tum etkilerini iptal et. */
  .hero3-topbar.hero3-mobile-below{display:none!important}

  .hero3-hero{
    height:420px!important;
    min-height:420px!important;
  }
  .hero3-content{
    top:28px!important;
    bottom:auto!important;
    left:12px!important;
    right:12px!important;
    max-width:430px!important;
  }
  .hero3-live-pill{font-size:7.5px!important;padding:4px 6px!important}
  .hero3-gediz-id{margin-top:5px!important;padding:4px 6px!important;gap:5px!important}
  .hero3-gediz-id strong{font-size:9.5px!important}
  .hero3-gediz-id span{font-size:8px!important}
  .hero3-content h1{
    font-size:34px!important;
    line-height:.98!important;
    margin:9px 0 4px!important;
    letter-spacing:-1.2px!important;
  }
  .hero3-content h2{
    font-size:20px!important;
    line-height:1!important;
    margin:0 0 7px!important;
  }
  .hero3-content p{font-size:11px!important;line-height:1.25!important}
  .hero3-buttons{margin-top:10px!important;gap:7px!important;display:flex!important;flex-wrap:nowrap!important}
  .hero3-primary,.hero3-secondary{
    height:37px!important;
    flex:1 1 0!important;
    min-width:0!important;
    padding:0 8px!important;
    font-size:9.4px!important;
    white-space:nowrap!important;
    justify-content:center!important;
  }
  .hero3-secondary{display:inline-flex!important}
  .hero3-dots{bottom:9px!important;gap:6px!important}
  .hero3-dots button{width:6px!important;height:6px!important}
  .hero3-categories{padding-top:9px!important}
}

@media (max-width:430px){
  .hero3-hero{height:405px!important;min-height:405px!important}
  .hero3-content{top:24px!important}
  .hero3-content h1{font-size:32px!important}
  .hero3-content h2{font-size:19px!important}
  .hero3-content p{font-size:10.5px!important}
  .hero3-primary,.hero3-secondary{height:36px!important;font-size:8.9px!important;padding:0 6px!important}
}

@media (max-width:360px){
  .hero3-hero{height:398px!important;min-height:398px!important}
  .hero3-content{top:21px!important;left:10px!important;right:10px!important}
  .hero3-content h1{font-size:30px!important}
  .hero3-content h2{font-size:18px!important}
  .hero3-primary,.hero3-secondary{font-size:8.3px!important}
  .hero3-topbar.hero3-mobile-float{top:7px!important;right:8px!important;gap:5px}
  .hero3-topbar.hero3-mobile-float .hero3-menu-toggle{width:36px!important;height:36px!important}
  .hero3-topbar.hero3-mobile-float .hero3-lang{width:44px!important;height:36px!important}
}

/* =========================================================
   MOBILE HERO BUTTON LABEL POLISH — 2026-08-22
   Buton kutularina dokunmadan, sadece etiketleri iki satir ve
   daha okunakli hale getirir.
   ========================================================= */
@media (max-width:760px){
  .hero3-buttons .hero3-primary,
  .hero3-buttons .hero3-secondary{
    gap:5px!important;
    align-items:center!important;
    padding:0 9px!important;
  }
  .hero3-buttons .hero3-play-icon,
  .hero3-buttons .hero3-grid-icon{
    font-size:10px!important;
    line-height:1!important;
    flex:0 0 auto!important;
  }
  .hero3-buttons .hero3-btn-label{
    display:block!important;
    text-align:center!important;
    line-height:1.02!important;
    font-size:11.2px!important;
    font-weight:900!important;
    letter-spacing:.12px!important;
    white-space:normal!important;
  }
}
@media (max-width:430px){
  .hero3-buttons .hero3-btn-label{font-size:10.6px!important}
}
@media (max-width:360px){
  .hero3-buttons .hero3-btn-label{font-size:9.8px!important}
}


/* =========================================================
   MOBILE HERO TEXT + STACKED CTA POLISH — 2026-08-22
   Mobilde ana mesajı daha güçlü gösterir ve CTA butonlarını
   alt alta dizerek daha rahat tıklanabilir hale getirir.
   ========================================================= */
@media (max-width:760px){
  .hero3-content p{
    max-width:340px!important;
    font-size:15px!important;
    line-height:1.32!important;
    font-weight:620!important;
    letter-spacing:.08px!important;
    color:rgba(255,255,255,.98)!important;
    text-shadow:0 2px 10px rgba(0,0,0,.34)!important;
  }
  .hero3-content p strong{
    display:block!important;
    margin-top:4px!important;
    font-size:18px!important;
    line-height:1.08!important;
    font-weight:900!important;
    letter-spacing:.08px!important;
  }
  .hero3-content p strong:last-child{
    color:#5fe7ff!important;
  }
  .hero3-buttons{
    margin-top:16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:min(100%,332px)!important;
  }
  .hero3-buttons .hero3-primary,
  .hero3-buttons .hero3-secondary{
    width:100%!important;
    flex:none!important;
    min-height:50px!important;
    height:50px!important;
    padding:0 14px!important;
    justify-content:center!important;
    gap:9px!important;
  }
  .hero3-buttons .hero3-play-icon,
  .hero3-buttons .hero3-grid-icon{
    font-size:12px!important;
  }
  .hero3-buttons .hero3-btn-label{
    font-size:15px!important;
    line-height:1.02!important;
    font-weight:900!important;
    letter-spacing:.1px!important;
  }
}
@media (max-width:430px){
  .hero3-content p{font-size:14px!important;max-width:320px!important}
  .hero3-content p strong{font-size:16.5px!important}
  .hero3-buttons{width:min(100%,318px)!important;gap:9px!important}
  .hero3-buttons .hero3-primary,
  .hero3-buttons .hero3-secondary{min-height:48px!important;height:48px!important}
  .hero3-buttons .hero3-btn-label{font-size:14px!important}
}
@media (max-width:360px){
  .hero3-content p{font-size:13px!important;max-width:290px!important}
  .hero3-content p strong{font-size:15px!important}
  .hero3-buttons{width:min(100%,300px)!important}
  .hero3-buttons .hero3-primary,
  .hero3-buttons .hero3-secondary{min-height:46px!important;height:46px!important;padding:0 12px!important}
  .hero3-buttons .hero3-btn-label{font-size:13px!important}
}