/* ==========================================================================
   AYDER TURIZM — SIZDEN GELENLER
   --------------------------------------------------------------------------
   Sayfanin isi guven vermek. Bu yuzden duzen su sirayla okunur:
     1. Koyu kapak seridi  — buyuk ortalama puan, dagilim, kurumsal sayilar
     2. Suzgec seridi      — tur ve yil
     3. Yorum izgarasi     — kolonlu (masonry) yerlesim
     4. Cagri seridi

   IZGARA NEDEN CSS COLUMNS: yorumlarin boyu cok degisken. Grid'te her
   satirin yuksekligi en uzun karta gore hizalaniyor ve kisa kartlarin
   altinda kocaman bosluklar kaliyordu. Kolon akisinda kartlar birbirine
   yaslanip bosluk birakmiyor; suzgec calisirken de yeniden akiyor.
   ========================================================================== */


/* ==========================================================================
   1. KAPAK SERIDI (.gbs)
   ========================================================================== */
.gbs { position: relative; overflow: hidden; background: var(--g-koyu);
       color: var(--tx-inv); padding: var(--s8) 0 var(--s9); }

/* Arkadaki yumusak turuncu isik — duz koyu zemin sert duruyordu */
.gbs__isik { position: absolute; top: -30%; right: -10%;
             width: min(720px, 80%); aspect-ratio: 1;
             background: radial-gradient(circle, rgba(244,125,24,.28) 0%,
                                                 rgba(244,125,24,0) 68%);
             pointer-events: none; }
.gbs__ic { position: relative; z-index: var(--z-1); }

.gbs__yol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
            margin-bottom: var(--s5);
            font-size: var(--fs-3xs); color: var(--tx-inv-mute); }
.gbs__yol a { color: var(--tx-inv-mute); transition: color var(--t1); }
.gbs__yol a:hover { color: var(--white); }
.gbs__yol svg { color: rgba(255,255,255,.4); }

.gbs__etk { display: inline-flex; align-items: center; gap: var(--s2);
            padding: 6px var(--s4); margin-bottom: var(--s4);
            font-size: var(--fs-3xs); font-weight: var(--fw-700);
            letter-spacing: var(--ls-cap); text-transform: uppercase;
            color: var(--brand-200);
            background: rgba(244,125,24,.14);
            border: 1px solid rgba(244,125,24,.28);
            border-radius: var(--rp); }
.gbs__etk svg { color: var(--brand); }

/* Renk ACIKCA veriliyor: app.css icindeki "h1,h2{color:var(--tx)}" kurali
   koyu zeminden gelen kalitimi yener — kalitim her zaman kaybeder. */
.gbs__b { color: var(--white);
          font-size: var(--fs-hero); font-weight: var(--fw-800);
          letter-spacing: var(--ls-tt); line-height: 1.05; }
.gbs__a { max-width: 54ch; margin-top: var(--s3);
          font-size: var(--fs-lead); line-height: 1.7; color: var(--tx-inv-mute); }


/* -------------------------------------------------- 1a. ORTALAMA PUAN -- */
.gpn { display: grid; grid-template-columns: auto 1fr; gap: var(--s7);
       align-items: center; margin-top: var(--s7); padding: var(--s6);
       background: rgba(255,255,255,.055);
       border: 1px solid rgba(255,255,255,.1);
       border-radius: var(--r4);
       backdrop-filter: blur(3px); }

.gpn__sol { text-align: center; }
.gpn__n { display: inline-block; font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
          font-weight: var(--fw-800); line-height: 1;
          letter-spacing: var(--ls-tt); color: var(--white);
          /* Sayac calisirken genislik degisince yanindaki "/ 5" zipliyordu */
          font-variant-numeric: tabular-nums; }
.gpn__b { font-size: var(--fs-h3); font-weight: var(--fw-700);
          color: var(--tx-inv-mute); margin-left: var(--s1); }
.yild--b { display: flex; justify-content: center; gap: 3px; margin-top: var(--s2); }
.yild--b svg { width: 20px; height: 20px; }
.yild--b .bos { color: rgba(255,255,255,.22); }
.gpn__k { display: block; margin-top: var(--s2);
          font-size: var(--fs-3xs); color: var(--tx-inv-mute); }


/* ------------------------------------------------- 1b. PUAN DAGILIMI -- */
.gdg { display: flex; flex-direction: column; gap: var(--s2); }
.gdg__s { display: grid; grid-template-columns: 46px 1fr 34px;
          align-items: center; gap: var(--s3); }
.gdg__p { display: inline-flex; align-items: center; gap: 3px;
          font-size: var(--fs-3xs); font-weight: var(--fw-700);
          color: var(--tx-inv-mute); }
.gdg__p svg { color: var(--star); }

.gdg__c { height: 7px; background: rgba(255,255,255,.12);
          border-radius: var(--rp); overflow: hidden; }
.gdg__c i { display: block; height: 100%; width: 0;
            background: linear-gradient(90deg, var(--star), var(--brand));
            border-radius: var(--rp);
            transition: width 1s var(--e); }
/* Cubuk serit goruse girince dolar — JS .dolu ekler */
.gdg.dolu .gdg__c i { width: var(--yuz); }

.gdg__n { font-size: var(--fs-3xs); font-weight: var(--fw-700);
          color: var(--tx-inv-mute); text-align: right;
          font-variant-numeric: tabular-nums; }


/* ------------------------------------------------ 1c. KURUMSAL SAYILAR -- */
.gsy { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4);
       margin-top: var(--s6); }
/* Flex kolon: sayi yukarida, etiket asagida dursun diye dt/dd sirasi
   order ile ters cevriliyor. Isaretlemede <dt> once gelmeli (tanim
   listesinin anlami bozulmasin), ekranda ise sayi one cikmali. */
.gsy__k { display: flex; flex-direction: column;
          padding: var(--s5) var(--s4); text-align: center;
          background: rgba(255,255,255,.05);
          border: 1px solid rgba(255,255,255,.09);
          border-radius: var(--r3);
          transition: border-color var(--t2), transform var(--t2); }
.gsy__k:hover { border-color: rgba(244,125,24,.45); transform: translateY(-3px); }

.gsy__k dt { display: flex; align-items: center; justify-content: center;
             gap: var(--s2); order: 2; margin-top: var(--s1);
             font-size: var(--fs-3xs); color: var(--tx-inv-mute); }
.gsy__k dt svg { color: var(--brand); }
.gsy__k dd { order: 1; }
.gsy__k strong { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
                 font-weight: var(--fw-800); letter-spacing: var(--ls-t);
                 color: var(--white); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   2. SUZGEC SERIDI (.gsz)
   ========================================================================== */
.gsz { position: sticky; top: var(--hd-h-s); z-index: var(--z-2);
       background: var(--white);
       border-bottom: 1px solid var(--line);
       box-shadow: var(--sh1); }

.gsz__ic { display: flex; align-items: flex-end; flex-wrap: wrap;
           gap: var(--s4); padding: var(--s4) var(--gut); }

.gsz__gr { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gsz__e { font-size: var(--fs-3xs); font-weight: var(--fw-700);
          letter-spacing: var(--ls-cap); text-transform: uppercase;
          color: var(--tx-mute); }
.gsz__s { min-width: 190px; max-width: 320px; }
.gsz__gr:first-child .gsz__s { min-width: 240px; }


.gsz__sn { margin-left: auto; padding-bottom: 9px;
           font-size: var(--fs-2xs); color: var(--tx-mute); }
.gsz__sn b { font-size: var(--fs-s); font-weight: var(--fw-800); color: var(--tx); }

.gsz__sf { display: inline-flex; align-items: center; gap: var(--s2);
           padding-bottom: 9px;
           font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--brand-700);
           transition: color var(--t1); }
.gsz__sf:hover { color: var(--brand); }


/* ==========================================================================
   3. YORUM IZGARASI (.glst / .gkt)
   ========================================================================== */
.glst { columns: 3; column-gap: var(--s5); margin-top: var(--s7); }

.gkt { position: relative; break-inside: avoid;
       display: flex; flex-direction: column; gap: var(--s3);
       /* Kolon akisinda alt bosluk margin ile verilir; gap calismaz */
       margin-bottom: var(--s5); padding: var(--s6);
       background: var(--white); border: 1px solid var(--line);
       border-radius: var(--r4); box-shadow: var(--sh1);
       transition: box-shadow var(--t2), transform var(--t2), border-color var(--t2); }
.gkt:hover { box-shadow: var(--sh3); transform: translateY(-4px);
             border-color: var(--brand-200); }

/* Suzgecin eledigi ve henuz acilmamis kartlar */
.gkt--gizli, .gkt--elendi { display: none; }

/* Dev tirnak isareti — sayfaya sicaklik katan tek susleme� */
.gkt__tr { position: absolute; top: -2px; right: var(--s5);
           font-size: 5rem; line-height: 1; font-weight: var(--fw-800);
           color: var(--brand-50); pointer-events: none; user-select: none; }

.gkt .yild { position: relative; }
.gkt .yild .bos { color: var(--line); }

.gkt__m { position: relative; font-size: var(--fs-s); line-height: 1.75;
          color: var(--tx-soft); }

/* Acentenin cevabi */
.gkt__yn { padding: var(--s4); background: var(--mist);
           border-left: 3px solid var(--brand); border-radius: var(--r2); }
.gkt__yn-b { display: inline-flex; align-items: center; gap: var(--s2);
             margin-bottom: 4px;
             font-size: var(--fs-3xs); font-weight: var(--fw-800);
             color: var(--brand-700); }
.gkt__yn p { font-size: var(--fs-2xs); line-height: 1.7; color: var(--tx-mute); }

.gkt__alt { display: flex; align-items: center; gap: var(--s3);
            padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.avtr--s { width: 34px; height: 34px; font-size: var(--fs-3xs); flex: none; }
.gkt__kim { display: flex; flex-direction: column; min-width: 0; }
.gkt__kim b { font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--tx); }
.gkt__kim small { font-size: 11px; color: var(--tx-faint); }

/* Turun kendisi — yoruma baglam veren en onemli parca */
.gkt__tur { display: flex; align-items: center; gap: var(--s3);
            padding: var(--s2); margin-top: auto;
            background: var(--mist); border: 1px solid transparent;
            border-radius: var(--r3); transition: all var(--t1); }
.gkt__tur:hover { background: var(--brand-50); border-color: var(--brand-200); }
.gkt__tur > svg { flex: none; margin-left: auto; color: var(--brand); }

.gkt__tur-g { flex: none; width: 44px; height: 34px; overflow: hidden;
              border-radius: var(--r2); background: var(--mist-2); }
.gkt__tur-g img { width: 100%; height: 100%; object-fit: cover; }
.gkt__tur-m { min-width: 0; }
.gkt__tur-m b { display: block; font-size: var(--fs-3xs);
                font-weight: var(--fw-700); color: var(--tx); }
.gkt__tur-m small { font-size: 10px; color: var(--tx-faint); }
.gkt__tur:hover .gkt__tur-m b { color: var(--brand-700); }

/* Bos sonuc */
.glst__yok { display: flex; flex-direction: column; align-items: center;
             gap: var(--s3); padding: var(--s10) var(--s5); text-align: center;
             font-size: var(--fs-s); color: var(--tx-mute); }
.glst__yok svg { color: var(--tx-faint); }

.glst__alt { display: flex; justify-content: center; margin-top: var(--s5); }
.glst__alt b { display: inline-flex; align-items: center; justify-content: center;
               min-width: 24px; height: 22px; padding: 0 7px;
               font-size: var(--fs-3xs); font-weight: var(--fw-800);
               background: var(--brand-50); color: var(--brand-700);
               border-radius: var(--rp); }


/* ==========================================================================
   4. CAGRI SERIDI (.gcta)
   ========================================================================== */
.gcta { display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: var(--s6);
        padding: var(--s8); background: var(--g-koyu);
        border-radius: var(--r5); color: var(--tx-inv); }
.gcta__m { max-width: 56ch; }
.gcta__m h2 { color: var(--white);
              font-size: var(--fs-h2); font-weight: var(--fw-800);
              letter-spacing: var(--ls-t); }
.gcta__m p { margin-top: var(--s2); font-size: var(--fs-s); line-height: 1.7;
             color: var(--tx-inv-mute); }
.gcta__d { display: flex; flex-wrap: wrap; gap: var(--s3); }


/* ==========================================================================
   5. DAR EKRANLAR
   ========================================================================== */
@media (max-width: 1100px) {
  .glst { columns: 2; }
  .gpn { grid-template-columns: 1fr; gap: var(--s5); }
}

@media (max-width: 860px) {
  .gsy { grid-template-columns: repeat(2, 1fr); }

  /* Suzgec seridinde yapiskanlik birakilir: dar ekranda serit iki satira
     tasiyor ve ekranin yarisini kapatiyordu. */
  .gsz { position: static; }
  .gsz__sn { margin-left: 0; }
}

@media (max-width: 680px) {
  .glst { columns: 1; }
  .gbs { padding: var(--s6) 0 var(--s7); }
  .gpn { padding: var(--s5); }
  .gcta { padding: var(--s6); border-radius: var(--r4); }
  .gcta__d { width: 100%; }
  .gcta__d .bt { flex: 1 1 auto; justify-content: center; }

  .gsz__ic { gap: var(--s3); }
  .gsz__gr { flex: 1 1 100%; }
  .gsz__s { max-width: none; width: 100%; }
  .gsz__gr:first-child .gsz__s { min-width: 0; }
}