/* ALP Studio /gta/ sayfasi: Dene kartlari.
   Yeni renk yok: her deger bir belirtec ya da onun saydamligi. */

/* --- 1. alp.css v3 alıntısı --- */
@font-face{font-family:"Funnel Display";src:url(/fontlar/funnel-display-latin-wght-normal.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Funnel Display";src:url(/fontlar/funnel-display-latin-ext-wght-normal.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";src:url(/fontlar/onest-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";src:url(/fontlar/onest-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --gece:#0C1220;--gece-2:#111A2C;--panel:#16203A;--panel-2:#1C2846;--cizgi:#25314C;--cizgi-2:#34425F;
  --metin:#EAF0F7;--metin-2:#A3AFC4;--metin-3:#8592AA;
  --vurgu:#52D8F2;--vurgu-acik:#7FE3F6;--vurgu-koyu:#062330;--vurgu-zemin:rgba(82,216,242,.09);--vurgu-cizgi:rgba(82,216,242,.38);
  --basari:#5FD3A0;--uyari:#F2C062;--hata:#FF9E8F;
  --f-baslik:"Funnel Display",ui-sans-serif,system-ui,sans-serif;--f-govde:"Onest",ui-sans-serif,system-ui,sans-serif;
  --y-dev:clamp(44px,7.4vw,96px);--y-h2:clamp(34px,4.2vw,54px);--y-h3:clamp(26px,3vw,40px);--y-h4:18px;
  --y-giris:18px;--y-govde:17px;--y-kucuk:15px;--y-not:14px;--y-en-kucuk:13px;
  --b-1:4px;--b-2:8px;--b-3:12px;--b-4:16px;--b-5:24px;--b-6:32px;--b-7:48px;--b-8:64px;--b-9:96px;
  --bolum:clamp(72px,9vw,128px);--kap:1200px;--yan:clamp(20px,4vw,40px);
  --r-kucuk:8px;--r-orta:12px;--r-buyuk:18px;--r-hap:999px;
  --g-katman:0 24px 60px -24px rgba(0,0,0,.6);
  --h-hizli:.15s;--h-orta:.25s;--h-egri:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--gece);color:var(--metin);font-family:var(--f-govde);font-size:var(--y-govde);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--f-baslik);margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.kap{max-width:calc(var(--kap) + 2*var(--yan));margin:0 auto;padding:0 var(--yan)}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:6px}
.atla{position:absolute;left:12px;top:-60px;background:var(--vurgu);color:var(--vurgu-koyu);padding:10px 14px;border-radius:8px;z-index:50;font-weight:600}
.atla:focus{top:12px}
.dug{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:10px;font:600 16px/1 var(--f-govde);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.dug-ana{background:var(--vurgu);color:var(--vurgu-koyu)}
.dug-ana:hover{background:var(--vurgu-acik)}
.dug-ana:active{transform:translateY(1px)}
.dug-ikincil{background:transparent;color:var(--metin);border-color:var(--cizgi-2)}
.dug-ikincil:hover{border-color:var(--metin-3);background:rgba(255,255,255,.03)}
.dug-kucuk{height:38px;padding:0 16px;font-size:15px;border-radius:9px}
.vizor{position:relative;padding:10px}
.vizor::before,.vizor::after,.vizor>.k1,.vizor>.k2{content:"";position:absolute;width:18px;height:18px;border-color:var(--cizgi-2);border-style:solid;pointer-events:none}
.vizor::before{top:0;left:0;border-width:1.5px 0 0 1.5px}
.vizor::after{top:0;right:0;border-width:1.5px 1.5px 0 0}
.vizor>.k1{bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.vizor>.k2{bottom:0;right:0;border-width:0 1.5px 1.5px 0}
.vizor .ic{border-radius:var(--r-kucuk);overflow:hidden;background:var(--gece-2);border:1px solid var(--cizgi)}
.vizor .ic img{width:100%}
.medya-f{margin:0}
.medya-f>figcaption{padding:0 10px}
.alt-yazi{margin-top:10px;font-size:14px;color:var(--metin-3);line-height:1.45}
.yer{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:220px;padding:22px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 12px,transparent 12px 24px),var(--gece-2)}
.yer .tur{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--vurgu)}
.yer .tur svg{flex:none}
.rozet{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-hap);font:500 14px/1 var(--f-govde);border:1px solid var(--cizgi-2);color:var(--metin-2);white-space:nowrap;vertical-align:2px}
.rozet-vurgu{color:var(--vurgu);border-color:var(--vurgu-cizgi)}
.doldur{display:inline-block;font-size:14px;color:var(--metin-3);border:1px dashed var(--cizgi-2);border-radius:6px;padding:1px 8px;vertical-align:1px}
.sonuc{margin-top:14px;font-size:15px;min-height:22px}
.sonuc.hata{color:var(--hata)}
[hidden]{display:none!important}

/* --- 2. Üst menü ve alt bilgi (p1.css) + plan §4.1 menüsü; telefonda details/summary (JS'siz) --- */
.ust{position:sticky;top:0;z-index:20;background:rgba(12,18,32,.92);border-bottom:1px solid var(--cizgi)}
.ust .kap{display:flex;align-items:center;height:68px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 19px/1 var(--f-baslik);letter-spacing:-.01em;margin-right:auto}
.logo img{width:28px;height:28px}
.logo span{color:var(--metin-2);font-weight:400}
.menu{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:8px 11px;border-radius:8px;text-decoration:none;color:var(--metin-2);font-size:15px;transition:color var(--h-hizli),background-color var(--h-hizli)}
.menu a:hover{color:var(--metin);background:rgba(255,255,255,.04)}
.menu a[aria-current]{color:var(--metin)}
.menu-tel{display:none;position:static}
.menu-tel summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--cizgi-2);border-radius:10px;color:var(--metin)}
.menu-tel[open] summary{border-color:var(--metin-3)}
.menu-tel ul{position:absolute;top:68px;left:0;right:0;list-style:none;margin:0;padding:8px var(--yan) 16px;background:var(--gece);border-bottom:1px solid var(--cizgi)}
.menu-tel a{display:block;padding:12px 4px;font-size:17px;border-bottom:1px solid var(--cizgi);text-decoration:none;color:var(--metin-2)}
.menu-tel a[aria-current]{color:var(--metin)}
.menu-tel details,.menu-tel{border:0}
@media (max-width:1060px){.menu{display:none}.menu-tel{display:block}.ust .kap{gap:10px}}
@media (max-width:400px){.ust .dug-kucuk{padding:0 12px}}
.altbilgi{border-top:1px solid var(--cizgi);padding:40px 0 32px;font-size:14px;color:var(--metin-3)}
.altbilgi .kap{display:grid;grid-template-columns:1fr auto;gap:16px 32px}
.altbilgi ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.altbilgi a{color:var(--metin-2);text-decoration:none;display:inline-block;padding:4px 0}
.altbilgi a:hover{color:var(--metin)}
.altbilgi p{max-width:80ch}
.altbilgi .alt-ust{margin-top:14px}
@media (max-width:560px){.altbilgi .kap{grid-template-columns:1fr}}

/* --- 3. ÖNERİ BİLEŞENLER --- */

/* Grup gezintisi: uzun katalogda gruba atlama; masaüstünde menünün altında sabit, telefonda akışta. Sayı = gruptaki komut. */
.grup-gez{position:sticky;top:68px;z-index:15;background:rgba(12,18,32,.94);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.grup-gez ul{display:flex;flex-wrap:wrap;gap:2px 4px;list-style:none;margin:0;padding:8px 0}
.grup-gez a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:10px;color:var(--metin-2);text-decoration:none;font-size:15px;transition:color var(--h-hizli),background-color var(--h-hizli)}
.grup-gez a span{font-size:14px;color:var(--metin-3);font-variant-numeric:tabular-nums}
.grup-gez a:hover{color:var(--metin);background:rgba(255,255,255,.04)}
.grup-gez .ilk{margin-left:-14px}
@media (max-width:860px){.grup-gez{position:static}.grup-gez a{padding:0 12px}.grup-gez .ilk{margin-left:-12px}}

/* Grup başlığı: katalog bölümü. Üst çizginin sol ucunda vizör köşesi (sitenin çerçeve dili); ad, bir cümle, komut sayısı. */
.grup-bas{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;gap:10px 40px;align-items:baseline;padding-top:24px;border-top:1px solid var(--cizgi);margin-bottom:clamp(28px,3.5vw,44px)}
.grup-bas::before{content:"";position:absolute;top:-1px;left:0;width:18px;height:18px;border-style:solid;border-color:var(--vurgu);border-width:1.5px 0 0 1.5px}
.grup-bas h2{font-size:var(--y-h3);letter-spacing:-.025em}
.grup-bas p{color:var(--metin-2);font-size:17px;line-height:1.5;max-width:46ch}
.grup-bas .say{font-size:14px;color:var(--metin-3);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:767px){.grup-bas{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}.grup-bas p{grid-column:1/-1;grid-row:2}}

/* Dene kartı: komutun oyundaki hâlini sesli video ile gösterir. Kutu yok (kart içinde kart olmasın); çerçeve = vizör.
   Video HTML'de yok: ilk tıklamada betik oluşturur. data-durum: dene | yukleniyor | caliyor | bitti | hata. */
.dene-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 28px}
@media (max-width:1023px){.dene-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.dene-izgara{grid-template-columns:minmax(0,1fr);gap:44px}}
.dene{position:relative;min-width:0}
.dene .vizor{padding:8px}
.dene .vizor::before,.dene .vizor::after,.dene .vizor>.k1,.dene .vizor>.k2{width:14px;height:14px;transition:border-color var(--h-orta)}
.dene .ic{position:relative;aspect-ratio:16/9;isolation:isolate}
.dene .ic img,.dene .ic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--gece-2)}
.dene .ic img{transition:transform .6s var(--h-egri),filter var(--h-orta)}
.dene .ic video{display:none;z-index:1}
.dene .kapak{position:absolute;inset:0;display:block;border-radius:0}
/* Alt kenarda hafif koyulaşma: düğme hangi karede olursa olsun okunur (süs değil, okunurluk). */
.dene .ic:not(.yer)::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(12,18,32,.55),rgba(12,18,32,0))}
.dene:hover .ic img{transform:scale(1.02);filter:brightness(1.07)}
.dene:hover .vizor::before,.dene:hover .vizor::after,.dene:hover .vizor>.k1,.dene:hover .vizor>.k2{border-color:var(--metin-3)}
.dene h3{margin-top:14px;padding:0 8px;font:600 var(--y-h4)/1.3 var(--f-govde);letter-spacing:-.005em}
.dene-not{margin-top:6px;padding:6px 8px 0;font-size:13px;line-height:1.45;color:var(--metin-3,var(--metin-2));max-width:44ch;border-top:1px dashed currentColor;opacity:.85}
.dene-aciklama{margin-top:6px;padding:0 8px;font-size:16px;line-height:1.5;color:var(--metin-2);max-width:40ch}
.dene-aciklama .doldur{margin-left:2px}
.dene-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding:0 8px}
.dene-meta .rozet svg{flex:none;color:var(--metin-3)}
.dene-meta .sure{font-size:14px;color:var(--metin-3);font-variant-numeric:tabular-nums}
.dene .sonuc{padding:0 8px;margin-top:10px;min-height:0}
.dene .ic.yer{min-height:0;padding:18px 20px;justify-content:flex-end}
.dene .ic.yer .tur{color:var(--metin-2)}
.dene .ic.yer .tur svg{color:var(--vurgu)}
.yakinda-etiket{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-hap);border:1px dashed rgba(234,240,247,.28);background:rgba(12,18,32,.82);font:500 14px/1 var(--f-govde);color:var(--metin)}

/* Dene düğmesi: kapağın sol altında hap; solda vurgu daire içinde durum simgesi, sağda tek kelime (Dene / Durdur / Tekrar).
   Dokunma hedefi 44 px. Saydam koyu zemin + 1 px açık kenar + iç üst ışık çizgisi: kapak hangi renkte olursa olsun ayrışır. */
.dene-dug{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 6px;border-radius:var(--r-hap);border:1px solid rgba(234,240,247,.18);background:rgba(12,18,32,.84);color:var(--metin);font:600 15px/1 var(--f-govde);letter-spacing:.005em;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px -14px rgba(0,0,0,.9);transition:border-color var(--h-hizli),background-color var(--h-hizli),transform var(--h-hizli)}
.dene-dug i{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--vurgu);color:var(--vurgu-koyu);box-shadow:inset 0 0 0 1px rgba(6,35,48,.18);transition:background-color var(--h-hizli)}
.dene-dug i>*{grid-area:1/1}
.dene-dug .s-dur,.dene-dug .s-tekrar,.dene-dug .s-bekle{display:none}
.dene-dug .s-bekle{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:don .8s linear infinite}
@keyframes don{to{transform:rotate(1turn)}}
.dene-dug:hover,.dene-dug.z-hover{border-color:var(--vurgu-cizgi);background:rgba(12,18,32,.92)}
.dene-dug:hover i,.dene-dug.z-hover i{background:var(--vurgu-acik)}
.dene-dug:active,.dene-dug.z-basili{transform:translateY(1px);background:rgba(12,18,32,.96)}
.dene-dug:focus-visible,.dene-dug.z-odak{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:var(--r-hap)}
[data-durum="yukleniyor"] .dene-dug .s-oynat,[data-durum="caliyor"] .dene-dug .s-oynat,[data-durum="bitti"] .dene-dug .s-oynat{display:none}
[data-durum="yukleniyor"] .dene-dug .s-bekle,[data-durum="caliyor"] .dene-dug .s-dur,[data-durum="bitti"] .dene-dug .s-tekrar{display:block}
[data-durum="hata"] .dene-dug i{background:var(--hata);color:#2A0E0A}
[data-durum="hata"] .dene-dug{border-color:rgba(255,158,143,.45)}
/* Çalarken: kapak gizli, video görünür; vizör köşeleri vurgu (kayıt vizörü "çekimde"); altta ilerleme çizgisi. */
[data-durum="yukleniyor"] .ic video,[data-durum="caliyor"] .ic video{display:block}
[data-durum="yukleniyor"] .kapak,[data-durum="caliyor"] .kapak{visibility:hidden}
.dene[data-durum="caliyor"] .vizor::before,.dene[data-durum="caliyor"] .vizor::after,.dene[data-durum="caliyor"] .vizor>.k1,.dene[data-durum="caliyor"] .vizor>.k2,
.dene[data-durum="yukleniyor"] .vizor::before,.dene[data-durum="yukleniyor"] .vizor::after,.dene[data-durum="yukleniyor"] .vizor>.k1,.dene[data-durum="yukleniyor"] .vizor>.k2{border-color:var(--vurgu)}
.dene[data-durum="hata"] .vizor::before,.dene[data-durum="hata"] .vizor::after,.dene[data-durum="hata"] .vizor>.k1,.dene[data-durum="hata"] .vizor>.k2{border-color:rgba(255,158,143,.6)}
.ilerleme{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(234,240,247,.16);opacity:0;transition:opacity var(--h-orta)}
.ilerleme span{display:block;height:100%;background:var(--vurgu);transform-origin:0 50%;transform:scaleX(var(--ilerleme,0))}
[data-durum="yukleniyor"] .ilerleme,[data-durum="caliyor"] .ilerleme{opacity:1}
.js-yok .dene-dug{display:none}
@media (prefers-reduced-motion:reduce){.dene:hover .ic img{transform:none}.dene-dug:active,.dene-dug.z-basili{transform:none}.dene-dug .s-bekle{border-right-color:currentColor;opacity:.6}}

/* --- 4. Sayfa düzeni --- */
.gta-ust{padding:clamp(40px,6vw,88px) 0 clamp(44px,5.5vw,76px)}
.ust-ic{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.gta-ust h1{font-size:clamp(40px,5.2vw,70px);letter-spacing:-.035em;line-height:1.02;max-width:12ch}
.gta-ust .giris{margin-top:22px;font-size:var(--y-giris);line-height:1.55;color:var(--metin-2);max-width:42ch}
.gta-ust .eylem{margin-top:30px}
.gta-ust .kucuk{margin-top:14px;font-size:14px;color:var(--metin-3);max-width:44ch}
.ust-gorsel .ic{position:relative;aspect-ratio:16/9}
.ust-gorsel .ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.ust-ic{grid-template-columns:minmax(0,1fr)}}
.grup{padding-top:clamp(56px,7vw,104px);scroll-margin-top:72px}
@media (min-width:861px){.grup{scroll-margin-top:132px}}
.son{margin-top:clamp(72px,9vw,128px);padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--cizgi);background:var(--gece-2)}
.son-ic{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 56px;align-items:end}
.son h2{font-size:var(--y-h2);letter-spacing:-.03em;max-width:16ch}
.son p{color:var(--metin-2);font-size:var(--y-giris);max-width:44ch}
.son .dug{margin-top:22px}
@media (max-width:900px){.son-ic{grid-template-columns:minmax(0,1fr)}}
.sis-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}@media (max-width:760px){.sis-izgara{grid-template-columns:minmax(0,1fr)}}.sis{display:flex;flex-direction:column;gap:14px}.sis-f{margin:0;border-radius:var(--r-kucuk);overflow:hidden;border:1px solid var(--cizgi);background:var(--gece-2);aspect-ratio:16/9;display:grid;place-items:center}.sis-f{position:relative}.sis-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.sis-m{padding:0 8px}.sis-m h3{font:600 var(--y-h4)/1.3 var(--f-govde)}.sis-m p,.sis-m li{font-size:15px;line-height:1.55;color:var(--metin-2)}.sis-m p{margin-top:8px}.sis-m ul{margin:10px 0 0;padding-left:18px;display:grid;gap:6px}.sis-m b{color:var(--metin-1,inherit);font-weight:600}.sis-m kbd{font:600 12px/1 var(--f-govde);padding:3px 6px;border:1px solid var(--cizgi);border-radius:4px;background:var(--gece-2)}