:root{
  --zemin:#121813; --tahta:#171E18; --siyah:#070A08; --pirinc:#C69C63;
  --metin:#E7E3D8; --govde:#CBC7BB; --sonuk:#8B9184; --kenar:rgba(198,156,99,.2);

  --yazi-xs:13px; --yazi-sm:14.5px; --yazi-md:16.5px; --yazi-lg:19px;
  --yazi-xl:clamp(21px,2.4vw,27px);
  --yazi-2xl:clamp(24px,3vw,31px);
  --yazi-3xl:clamp(30px,4.2vw,48px);
  --yazi-4xl:clamp(32px,4.8vw,58px);
  --ar-1:6px; --ar-2:12px; --ar-3:18px; --ar-4:26px;
  --ar-5:clamp(32px,5vh,56px);
  --ar-6:clamp(40px,6.5vh,76px);
  --ar-7:clamp(50px,8vh,90px);
  --ar-yatay:clamp(16px,3vw,40px);
  --kap-en:1180px;
  --yan:clamp(20px,4vw,48px);
  --sure-hizli:.25s; --sure-orta:.45s; --sure-yavas:.9s;
  --egri:cubic-bezier(.2,.7,.2,1);
  --egri-giris:cubic-bezier(.16,.84,.26,1);   /* girişler: hızlı başlar, yumuşak durur */
  --gir-sure:.85s; --gir-gecik:60ms;
  --egri-yumusak:cubic-bezier(.16,1,.3,1);
  --egri-keskin:cubic-bezier(.65,0,.35,1);
  --gir:.85s; --gir-gec:90ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--zemin);color:var(--metin);font-family:'Karla',system-ui,sans-serif;
     font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.kap{max-width:var(--kap-en);margin:0 auto;padding:0 var(--yan)}

/* ---------- ÜST ÇUBUK ---------- */
header{position:sticky;top:0;z-index:40;display:flex;align-items:center;
       justify-content:space-between;gap:18px;padding:12px var(--yan);
       background:rgba(18,24,19,.94);backdrop-filter:blur(8px);
       border-bottom:1px solid var(--kenar)}
header .logo img{height:78px;width:auto}
nav{display:flex;gap:24px;flex-wrap:wrap}
nav a{color:var(--sonuk);text-decoration:none;font-size:20px;padding-bottom:3px;
      border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
nav a:hover{color:var(--metin)}
nav a.acik{color:var(--metin);border-bottom-color:var(--pirinc)}
.diller{display:flex;gap:13px;font-size:15px;letter-spacing:.12em;color:var(--sonuk)}
.diller button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.diller button.acik{color:var(--pirinc)}

/* ---------- SAYFA GEÇİŞİ ---------- */
/* sayfa geçişi: siyah perde aşağıdan gelir, çıkarken yukarı süzülür */
#gecis{position:fixed;inset:0;z-index:95;background:var(--siyah);
       display:grid;place-items:center;gap:20px;grid-auto-flow:row;
       opacity:1;visibility:visible;
       clip-path:inset(0 0 0 0);
       transition:clip-path .62s var(--egri-giris),opacity .45s ease .12s,visibility .62s}
#gecis.kapali{opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0)}
#gecis img{transition:opacity .4s ease,transform .6s var(--egri-giris)}
#gecis.kapali img{opacity:0;transform:translate3d(0,-12px,0)}
/* pirinç çizgi perdenin önünde süpürür */
#gecis span{position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(to right,transparent,var(--pirinc),transparent);
  transform:translate3d(0,0,0) scaleX(0);transform-origin:left;
  transition:transform .6s var(--egri-giris)}
#gecis:not(.kapali) span{transform:scaleX(1)}
#gecis img{width:min(120px,26vw);opacity:.92;animation:nefes 1.6s ease-in-out infinite}
#gecis span{width:56px;height:1px;background:var(--pirinc);transform-origin:center;
            animation:cizgi 1.6s ease-in-out infinite}
@keyframes nefes{0%,100%{opacity:.55;transform:scale(.99)}50%{opacity:1;transform:scale(1.01)}}
@keyframes cizgi{0%,100%{transform:scaleX(.2);opacity:.25}50%{transform:scaleX(1);opacity:.85}}

/* ---------- GENEL ---------- */
.ust{padding:var(--ar-6) 0 10px}
.yol{font-size:var(--yazi-md);color:var(--sonuk);margin-bottom:20px}
.yol a{text-decoration:none}
.ust h1{font-weight:200;font-size:var(--yazi-4xl);line-height:1.1}
h2{font-weight:300;font-size:clamp(22px,2.7vw,27px);letter-spacing:.06em;
   padding-bottom:12px;border-bottom:1px solid var(--kenar);
   margin:var(--ar-6) 0 0;display:flex;justify-content:space-between;
   align-items:baseline;gap:14px;flex-wrap:wrap}
h2 a{text-decoration:none;color:inherit}
h2 a:hover{color:var(--pirinc)}
.aciklama{font-size:19.5px;font-weight:400;line-height:1.8;color:var(--govde);
          max-width:58ch;margin:24px 0}
.aciklama strong{color:var(--metin);font-weight:500}
.altyazi{margin-top:12px;font-size:var(--yazi-md);color:var(--sonuk)}
.genis{margin:var(--ar-5) 0}
.genis img{width:100%}
.rozet{text-transform:uppercase;display:inline-block;font-size:15px;letter-spacing:.1em;color:var(--zemin);
       background:var(--pirinc);padding:5px 12px}
footer{border-top:1px solid var(--kenar);margin-top:70px;padding:30px 0 46px;
       font-size:16px;color:var(--sonuk);display:flex;justify-content:space-between;
       gap:14px;flex-wrap:wrap}

/* ---------- AÇILIŞ PERDESİ ---------- */
#perde{position:fixed;inset:0;z-index:90;background:#000;display:grid;place-items:center;
       cursor:pointer;transition:opacity .7s ease,visibility .7s}
#perde.bitti{opacity:0;visibility:hidden}
.perde-ic{text-align:center;animation:perdeZoom 1s cubic-bezier(.5,0,.75,0) 2.5s forwards}
.perde-simge{width:min(230px,44vw);margin:0 auto;opacity:0;
             animation:parla 1.3s var(--egri) .15s forwards}
.perde-yazi{width:min(300px,56vw);margin:26px auto 0;
            clip-path:inset(0 100% 0 0);filter:brightness(2.4) blur(2px);
            animation:silme .95s cubic-bezier(.4,0,.2,1) 1.35s forwards}
@keyframes parla{
  0%{opacity:0;filter:blur(26px) brightness(3.2);transform:scale(1.06)}
  55%{opacity:1;filter:blur(7px) brightness(1.8)}
  100%{opacity:1;filter:blur(0) brightness(1);transform:scale(1)}}
@keyframes silme{
  0%{clip-path:inset(0 100% 0 0);filter:brightness(2.4) blur(2px)}
  70%{clip-path:inset(0 0 0 0);filter:brightness(1.9) blur(.6px)}
  100%{clip-path:inset(0 0 0 0);filter:brightness(1) blur(0)}}
@keyframes perdeZoom{to{transform:scale(7);opacity:0}}
#perde .gec{position:absolute;bottom:26px;left:0;right:0;text-align:center;
            font-size:14px;color:rgba(231,227,216,.3);opacity:0;
            animation:belir .8s ease 2.1s forwards}
@keyframes belir{to{opacity:1}}

/* ---------- ANA SAYFA VİDEO ---------- */

/* ================= ANA SAYFA ŞERİTLERİ ================= */
.stüdyo{font-size:var(--yazi-2xl);font-weight:400;line-height:1.45;
        color:var(--metin);max-width:24ch;margin:var(--ar-7) 0 0}
.rakam{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ar-yatay);
       margin-top:var(--ar-5);border-top:1px solid var(--kenar)}
.rakam div{padding:24px 0;border-bottom:1px solid var(--kenar)}
.rakam b{display:block;line-height:1.1;margin-bottom:8px;color:var(--pirinc)}
.rakam span{font-family:'Karla',sans-serif;font-size:16px;color:var(--sonuk)}

/* --- NASIL ÇALIŞIYORUZ: aşamalı kutular --- */
.adimlar{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);
         margin-top:34px;position:relative}
.adimlar::before{content:"";position:absolute;left:0;right:0;top:42px;height:1px;
                 background:linear-gradient(to right,var(--kenar),var(--pirinc),var(--kenar));
                 opacity:.55;z-index:0}
.adimlar article{position:relative;z-index:1;background:var(--tahta);
                 border:1px solid var(--kenar);padding:clamp(20px,2.4vw,28px);
                 display:flex;flex-direction:column;transition:border-color .4s,transform .4s}
.adimlar article:hover{border-color:var(--pirinc);transform:translateY(-4px)}
.adimlar .no{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
             background:var(--zemin);border:1px solid var(--pirinc);color:var(--pirinc);
             font-family:'Karla',sans-serif;font-size:16px;font-weight:500;
             margin:-38px 0 18px;letter-spacing:.02em}
.adimlar h3{font-weight:600;font-size:var(--yazi-xl);margin:0 0 10px}
.adimlar p{font-family:'Karla',sans-serif;font-size:var(--yazi-md);line-height:1.7;color:var(--govde)}
.adimlar .ok{position:absolute;top:36px;right:-13px;width:20px;height:20px;
             display:grid;place-items:center;color:var(--pirinc);font-size:15px;
             background:var(--zemin);border-radius:50%;z-index:2}
.adimlar article:last-child .ok{display:none}

.band{width:100vw;margin-left:50%;transform:translateX(-50%);
      margin-top:var(--ar-7);overflow:hidden}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover}
.detay{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(24px,4vw,56px);
       align-items:center;margin-top:var(--ar-6)}
.cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
     margin-top:var(--ar-7);padding:clamp(28px,4vw,44px);
     background:var(--tahta);border:1px solid var(--kenar)}
.cta p{font-size:clamp(20px,2.4vw,26px);max-width:24ch;margin:0}
.cta a{text-decoration:none;background:var(--pirinc);color:var(--zemin);
       font-family:'Karla',sans-serif;font-size:18px;font-weight:500;
       padding:15px 32px;white-space:nowrap}
.cta a:hover{filter:brightness(1.08)}

/* ---------- İLETİŞİM: TEK EKRAN ---------- */
.tek-ekran{min-height:calc(100vh - 120px);display:grid;
           grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,64px);
           align-items:center;padding:clamp(24px,4vh,46px) 0}
.tek-ekran h1{font-size:var(--yazi-3xl);line-height:1.1}
.tek-ekran .bilgi{display:flex;flex-direction:column;gap:22px;margin-top:30px}
.tek-ekran .bilgi b{display:block;font-family:'Karla',sans-serif;font-size:13.5px;
                    letter-spacing:.2em;color:var(--sonuk);font-weight:400;margin-bottom:6px;text-transform:uppercase}
.tek-ekran .bilgi a{color:var(--metin);text-decoration:none;font-size:var(--yazi-lg);
                    border-bottom:1px solid var(--kenar);padding-bottom:3px}
.tek-ekran .bilgi a:hover{color:var(--pirinc);border-bottom-color:var(--pirinc)}
.form.sik{margin-top:0;max-width:none;gap:14px}
.form.sik input,.form.sik select{padding:11px 14px;font-size:16px}
.form.sik textarea{min-height:96px;padding:11px 14px;font-size:16px}
.form.sik label{font-size:14px;margin-bottom:6px}
.form.sik button{padding:13px 28px}

/* ---------- PROJE KARTLARI ---------- */
.projeler{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px);margin-top:30px}
.proje{text-decoration:none;color:inherit;display:block}
.proje-g{overflow:hidden;background:var(--tahta)}
.proje-g img{width:100%;aspect-ratio:16/10;object-fit:cover;
             transition:transform .9s var(--egri)}
.proje:hover .proje-g img{transform:scale(1.04)}
.proje h3{font-weight:300;font-size:clamp(22px,2.6vw,28px);margin:18px 0 4px}
.proje .tur{font-size:16px;color:var(--pirinc);margin-bottom:14px}
.proje dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:var(--yazi-md)}
.proje dt{color:var(--sonuk)}

.liste{margin-top:34px;display:flex;flex-direction:column;gap:var(--ar-5)}
.kart{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(22px,3.4vw,44px);
      align-items:center;text-decoration:none;color:inherit}
.kart:nth-child(even) .kart-g{order:2}
.kart-g{overflow:hidden;background:var(--tahta)}
.kart-g img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--egri)}
.kart:hover .kart-g img{transform:scale(1.04)}
.kart h2{font-weight:200;font-size:clamp(26px,3.6vw,40px);line-height:1.15;
         border:0;padding:0;margin:0;display:block}
.kart .tur{font-size:17px;color:var(--pirinc);margin:8px 0 20px}
.kart p{font-size:18px;line-height:1.75;color:var(--govde);margin-bottom:20px;max-width:46ch}
.kart dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:17px;
         border-top:1px solid var(--kenar);padding-top:16px}
.kart dt{color:var(--sonuk)}
.git{display:inline-block;margin-top:20px;font-size:17px;color:var(--pirinc);
     border-bottom:1px solid var(--kenar);padding-bottom:3px}

/* ---------- PROJE VİTRİNİ ---------- */
.vitrin{max-width:1600px;margin:38px auto 0;padding:0 var(--ar-yatay);
        display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,2.5fr) minmax(210px,1fr);
        gap:clamp(20px,2.8vw,44px);align-items:stretch}
.vitrin .orta img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.vitrin dl{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:10px}
.vitrin dl div{padding:16px 0;border-top:1px solid var(--kenar)}
.vitrin dl div:last-child{border-bottom:1px solid var(--kenar)}
.vitrin dt{font-size:15px;color:var(--sonuk);margin-bottom:6px}
.vitrin dd{font-size:var(--yazi-lg);font-weight:400;line-height:1.35}
.vitrin .altyazi{grid-column:2;margin-top:0}

/* ---------- KÜNYE ---------- */
.kunye{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 34px;
       border-top:1px solid var(--kenar);margin-top:34px}
.kunye div{padding:18px 0;border-bottom:1px solid var(--kenar)}
.kunye dt{font-size:15px;color:var(--sonuk);margin-bottom:6px}
.kunye dd{font-size:20px;font-weight:400}

/* ---------- ÇİZİMLER ---------- */
.cizimler{max-width:var(--kap-en);margin:30px auto 0;padding:0 var(--yan);
          display:flex;flex-direction:column;gap:24px}
.cizim{background:var(--tahta);border:1px solid var(--kenar);padding:clamp(14px,2vw,26px)}
.cizim button{display:block;width:100%;background:none;border:0;padding:0;cursor:zoom-in}
.cizim-ad{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline;
          margin-top:16px;padding-top:12px;border-top:1px solid var(--kenar);
          font-size:var(--yazi-md);color:var(--sonuk)}
.cizim-ad b{color:var(--metin);font-weight:400;font-size:18.5px}
.buyut{font-size:15px;color:var(--pirinc)}
.notlar{margin-top:16px;border-top:1px solid var(--kenar);padding-top:14px}
.notlar-bas{font-size:var(--yazi-sm);letter-spacing:.14em;color:var(--pirinc);margin-bottom:12px}
.notlar > div{display:grid;grid-template-columns:190px 1fr;gap:14px;padding:7px 0}
.notlar dt{font-size:var(--yazi-md);color:var(--sonuk)}
.notlar dd{font-size:17.5px;color:var(--metin);font-weight:400}
.anahtar h3{font-weight:400;font-size:var(--yazi-lg);margin-bottom:16px}
.ank{list-style:none}
.ank li{font-size:17.5px;padding:6px 0 6px 20px;position:relative;color:var(--metin)}
.ank li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:1px;background:var(--pirinc)}
.ciz-govde{display:grid;gap:clamp(16px,2.2vw,30px)}
.cizim.anahtarli .ciz-govde{grid-template-columns:1fr 235px;align-items:start}

/* ---------- ÇİZİM PENCERESİ ---------- */
#lup{position:fixed;inset:0;z-index:92;background:rgba(7,10,8,.97);display:none;
     grid-template-rows:auto 1fr}
#lup.acik{display:grid}
#lup .cubuk{display:flex;justify-content:space-between;align-items:center;gap:12px;
            padding:13px clamp(14px,3vw,26px);border-bottom:1px solid var(--kenar);font-size:17px}
#lup .cubuk b{color:var(--metin);font-weight:400}
#lup .cubuk span{color:var(--sonuk);font-size:15px}
#lup .cubuk button{background:none;border:1px solid var(--kenar);color:var(--metin);
                   font:inherit;font-size:16px;padding:9px 18px;cursor:pointer}
#lup .cubuk button:hover{border-color:var(--pirinc);color:var(--pirinc)}
#lup .sahne{overflow-y:auto;overflow-x:hidden;padding:26px clamp(16px,4vw,60px) 60px}
#lup .kare{position:relative;max-width:1500px;margin:0 auto}
#lup-g{width:100%;height:auto;display:block;cursor:crosshair}

/* ---------- KONSEPT ---------- */
.suzgec{display:flex;gap:9px;flex-wrap:wrap;margin:34px 0 8px;border-top:1px solid var(--kenar);padding-top:22px}
.suzgec button{background:none;border:1px solid var(--kenar);color:var(--sonuk);
               font:inherit;font-size:16px;padding:9px 18px;cursor:pointer;transition:.25s}
.suzgec button:hover{color:var(--metin)}
.suzgec button.acik{background:var(--pirinc);border-color:var(--pirinc);color:var(--zemin)}
.sayac{margin:16px 0 26px;font-size:16px;color:var(--sonuk)}
.ko.gizli{display:none}
.kume{margin-top:var(--ar-5)}
.kume h2{margin-top:0}
/* editoryal ızgara — ritim JS ile atanır, süzgeçte boşluk oluşmaz */
.izgara{display:grid;grid-template-columns:repeat(6,1fr);
        gap:var(--ar-3);margin-top:var(--ar-4);align-items:start}
.ko{grid-column:span 2}
.ko.genis{grid-column:span 3}
.ko.genis img{aspect-ratio:4/3}
.ko.dar{grid-column:span 2}
.ko.dar img{aspect-ratio:3/4}
/* son sırada artan kartlar sırayı eşit paylaşır — boşluk kalmaz */
.ko.esit1{grid-column:span 6} .ko.esit1 img{aspect-ratio:21/9}
.ko.esit2{grid-column:span 3} .ko.esit2 img{aspect-ratio:4/3}
.ko.esit3{grid-column:span 2} .ko.esit3 img{aspect-ratio:3/4}
.ko.esit4{grid-column:span 3} .ko.esit4 img{aspect-ratio:4/3}
.ko button{display:block;width:100%;background:none;border:0;padding:0;cursor:zoom-in;overflow:hidden}
.ko img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.95) brightness(.9);
        transition:transform .8s var(--egri),filter .5s}
.ko button:hover img{transform:scale(1.05);filter:none}
.ko figcaption{margin-top:10px;font-family:'Karla',sans-serif;
  font-size:var(--yazi-sm);color:var(--sonuk);letter-spacing:.01em}

/* ---------- HİZMETLER ---------- */
.hizmetler{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:22px}
.hizmetler li{display:flex;align-items:baseline;gap:18px;padding:17px 0;
              border-bottom:1px solid var(--kenar);font-size:18.5px;transition:padding-left .35s}
.hizmetler li::before{content:attr(data-no);font-size:13.5px;letter-spacing:.14em;
                      color:var(--pirinc);min-width:28px}
.hizmetler li:hover{padding-left:10px}
.hiz-sira{margin-top:30px;border-top:1px solid var(--kenar)}
.hiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
     grid-template-rows:auto auto auto;
     gap:var(--ar-2) clamp(24px,4vw,64px);align-items:start;
     padding:var(--ar-5) 0;border-bottom:1px solid var(--kenar)}
.hiz .no{grid-column:1;grid-row:1}
.hiz h3{grid-column:1;grid-row:2}
.hiz p{grid-column:1;grid-row:3;max-width:46ch}
.hiz .g{grid-column:2;grid-row:1/4;align-self:center}
.hiz-sira .hiz:nth-child(even) .g,.alan-sira .hiz:nth-child(even) .g{grid-column:1}
.hiz-sira .hiz:nth-child(even) .no,.hiz-sira .hiz:nth-child(even) h3,
.hiz-sira .hiz:nth-child(even) p,.alan-sira .hiz:nth-child(even) .no,
.alan-sira .hiz:nth-child(even) h3,.alan-sira .hiz:nth-child(even) p{grid-column:2}
.hiz:hover{background:rgba(198,156,99,.035)}
.hiz .no{font-size:15px;letter-spacing:.16em;color:var(--pirinc);align-self:start;padding-top:8px}
.hiz h3{font-weight:300;font-size:var(--yazi-2xl);line-height:1.2}
.hiz p{font-size:17.5px;line-height:1.75;color:var(--govde)}
.hiz .g{overflow:hidden;background:var(--tahta)}
.hiz .g img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.96) brightness(.93);
  transition:transform var(--sure-yavas) var(--egri),filter var(--sure-orta) ease;
            transition:transform .9s var(--egri),filter .5s}
.hiz:hover .g img{transform:scale(1.05);filter:none}

/* ---------- İLETİŞİM ---------- */
.iletisim{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin-top:30px}
.iletisim b{display:block;font-size:var(--yazi-sm);letter-spacing:.2em;color:var(--sonuk);
            font-weight:400;margin-bottom:9px}
.iletisim a{color:var(--metin);text-decoration:none;font-size:var(--yazi-lg);
            border-bottom:1px solid var(--kenar);padding-bottom:3px}
.iletisim a:hover{color:var(--pirinc);border-bottom-color:var(--pirinc)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;max-width:840px}
.form .tam{grid-column:1/-1}
.form label{display:block;font-size:15px;color:var(--sonuk);margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;background:var(--tahta);color:var(--metin);
  border:1px solid var(--kenar);font:inherit;font-size:17px;padding:13px 15px;border-radius:0}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--pirinc)}
.form button{justify-self:start;background:var(--pirinc);border:0;color:var(--zemin);
             font:inherit;font-size:17px;padding:14px 30px;cursor:pointer}
.form button:hover{filter:brightness(1.08)}
.form-not{grid-column:1/-1;font-size:15px;color:var(--sonuk);line-height:1.6}

/* ---------- MOBİL ---------- */

/* ================= ARAPÇA / SAĞDAN SOLA ================= */
html[data-dil="ar"] body,
html[data-dil="ar"] .aciklama, html[data-dil="ar"] p, html[data-dil="ar"] dd,
html[data-dil="ar"] dt, html[data-dil="ar"] li, html[data-dil="ar"] nav a,
html[data-dil="ar"] label, html[data-dil="ar"] input, html[data-dil="ar"] select,
html[data-dil="ar"] textarea, html[data-dil="ar"] button{
  font-family:'Tajawal','Karla',system-ui,sans-serif;
}
/* başlıklarda klasik kontrastlı naskh — Bodoni ile aynı dil */
html[data-dil="ar"] h1, html[data-dil="ar"] h2, html[data-dil="ar"] h3,
html[data-dil="ar"] .film-yazi h1, html[data-dil="ar"] .stüdyo,
html[data-dil="ar"] .cta p, html[data-dil="ar"] .rakam b,
html[data-dil="ar"] .kart h2, html[data-dil="ar"] .proje h3,
html[data-dil="ar"] .hiz h3, html[data-dil="ar"] .adimlar h3{
  font-family:'Amiri','Tajawal',serif;font-weight:400;
}
html[data-dil="ar"]{letter-spacing:0}
html[data-dil="ar"] h1,html[data-dil="ar"] h2,html[data-dil="ar"] h3{letter-spacing:0}
html[data-dil="ar"] .perde-yazi,html[data-dil="ar"] .diller{letter-spacing:.1em}
html[data-dil="ar"] .aciklama,html[data-dil="ar"] .hiz p,html[data-dil="ar"] .adimlar p{line-height:2}

[dir="rtl"] .ank li{padding:6px 20px 6px 0}
[dir="rtl"] .ank li::before{left:auto;right:0}
[dir="rtl"] .hizmetler li::before{order:2}
[dir="rtl"] .hizmetler li:hover{padding-left:0;padding-right:10px}
[dir="rtl"] .satir:hover{padding-left:0;padding-right:14px}
[dir="rtl"] .kart:nth-child(even) .kart-g{order:0}
[dir="rtl"] .kart:nth-child(odd) .kart-g{order:2}
[dir="rtl"] .vitrin{direction:rtl}
[dir="rtl"] .form button{justify-self:end}
[dir="rtl"] #lup-g{cursor:crosshair}
[dir="rtl"] .yol{direction:rtl}
[dir="rtl"] .proje dl,[dir="rtl"] .kart dl{direction:rtl}
[dir="rtl"] .notlar > div{direction:rtl}
[dir="rtl"] .git,[dir="rtl"] .proj-open{direction:rtl}

.tur-ust{margin-top:12px;font-size:20px;color:var(--pirinc)}
.tekrar{background:none;border:1px solid var(--kenar);color:var(--sonuk);font:inherit;
        font-size:15px;padding:8px 16px;cursor:pointer}
.tekrar:hover{border-color:var(--pirinc);color:var(--pirinc)}

/* ================= TİPOGRAFİ: Bodoni Moda + Karla =================
   Bodoni koyu zeminde incelir. Üç önlem:
   1) opsz ekseni 16'ya sabitlendi — metin çizimi, display çiziminden daha tok
   2) ağırlıklar yükseltildi
   3) başlıklarda antialiasing kapalı — koyu zeminde harfi kalınlaştırır  */
h1,h2,h3,.film-yazi h1,.stüdyo,.cta p,.rakam b,
.kart h2,.proje h3,.hiz h3,.adimlar h3,.tek-ekran h1{
  font-family:'Bodoni Moda',Georgia,serif;
  font-optical-sizing:none;
  font-variation-settings:'opsz' 16;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}
.ust h1,.tek-ekran h1{font-weight:600;letter-spacing:0}
.film-yazi h1{font-weight:700;letter-spacing:0;line-height:1.14;
              text-shadow:0 2px 20px rgba(7,10,8,.9),0 0 1px rgba(231,227,216,.35)}
h2{font-weight:600;letter-spacing:.01em;font-size:var(--yazi-2xl)}
h3,.adimlar h3,.hiz h3{font-weight:600;letter-spacing:0}
.kart h2{font-weight:600}
.proje h3{font-weight:600}
.rakam b{font-weight:700;font-size:var(--yazi-3xl)}
.stüdyo{font-weight:500;line-height:1.45}
.cta p{font-weight:600}

/* küçük boyutta kalan her şey Karla'da kalır — okunaklılık için */
.cizim-ad b,.anahtar h3,.notlar dd,.kunye dd,.tur,.tur-ust,
.proje .tur,.kart .tur,.iletisim a,.tek-ekran .bilgi a{
  font-family:'Karla',system-ui,sans-serif;
}
.anahtar h3{font-weight:500}
.kunye dd{font-weight:500}
.cizim-ad b{font-weight:500}

/* arapça başlıklar da kalınlaştı */
html[data-dil="ar"] h1,html[data-dil="ar"] h2,html[data-dil="ar"] h3,
html[data-dil="ar"] .film-yazi h1,html[data-dil="ar"] .rakam b,
html[data-dil="ar"] .cta p{font-weight:700;font-variation-settings:normal}

/* ================= HAMBURGER MENÜ ================= */
.mnu{display:none;background:none;border:0;padding:10px 6px;cursor:pointer;
     flex-direction:column;gap:6px;width:44px;align-items:flex-end}
.mnu span{display:block;height:1.5px;background:var(--metin);transition:.3s;width:26px}
.mnu span:nth-child(2){width:19px}
.mnu[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mnu[aria-expanded="true"] span:nth-child(2){opacity:0}
.mnu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);width:26px}

#mnu{position:fixed;inset:0;z-index:60;background:var(--siyah);display:none;
     overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
     padding:70px 24px 44px;opacity:0;transition:opacity .35s ease}
#mnu.acik{display:block;opacity:1}
.mnu-ic{min-height:100%;display:flex;flex-direction:column;align-items:center;
        justify-content:center;gap:0}
.mnu-kapat{position:absolute;top:18px;right:20px;background:none;border:1px solid var(--kenar);
           color:var(--metin);font:inherit;font-size:20px;width:46px;height:46px;cursor:pointer}
.mnu-logo{width:66px;opacity:.85;margin-bottom:26px;flex:none}
.mnu-nav{display:flex;flex-direction:column;gap:4px;text-align:center;width:100%}
.mnu-nav a{font-family:'Bodoni Moda',Georgia,serif;font-weight:600;
           font-variation-settings:'opsz' 16;-webkit-font-smoothing:auto;
           font-size:clamp(24px,6.6vw,34px);color:var(--metin);text-decoration:none;
           padding:9px 0;border-bottom:0}
.mnu-nav a.acik{color:var(--pirinc)}
.mnu-alt{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:12px;
         padding-top:26px;border-top:1px solid var(--kenar);width:100%;max-width:340px}
.mnu-alt a{color:var(--sonuk);text-decoration:none;font-size:17px}
.mnu-dil{margin-top:8px;gap:18px;font-size:16px}

/* ================= WHATSAPP ================= */
.wa{position:fixed;right:20px;bottom:20px;z-index:55;display:inline-flex;align-items:center;
    gap:10px;padding:13px 20px;background:var(--tahta);border:1px solid var(--kenar);
    color:var(--pirinc);text-decoration:none;border-radius:999px;
    box-shadow:0 12px 34px -14px rgba(0,0,0,.75);transition:.3s}
.wa:hover{border-color:var(--pirinc);color:var(--metin);transform:translateY(-2px)}
.wa-yazi{font-family:'Karla',sans-serif;font-size:16px;font-weight:500}
[dir="rtl"] .wa{right:auto;left:20px}

/* ================= TELEFON DÜZENİ ================= */

/* ================= TELEFONDA NEFES PAYI ================= */

/* kısa ekranlarda menü sığsın */

/* ================= 1f · BEŞ BLOK DÜZENİ ================= */
.acilis-blok{margin-top:var(--ar-7)}
.acilis-blok .stüdyo{margin-top:0}
.acilis-blok .rakam{margin-top:clamp(26px,3.5vh,38px)}

.ikili-kart{display:block;text-decoration:none;color:inherit;margin-top:30px;
            background:var(--tahta);border:1px solid var(--kenar);padding:clamp(16px,2.4vw,28px);
            transition:border-color .35s}
.ikili-kart:hover{border-color:var(--pirinc)}
.ik-bas{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
        flex-wrap:wrap;margin-bottom:18px}
.ik-bas h3{font-size:clamp(22px,2.8vw,30px);margin:0}
.ik-meta{font-family:'Karla',sans-serif;font-size:var(--yazi-md);color:var(--pirinc)}
.ik-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,20px)}
.ik-g figure{margin:0}
.ik-g img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--zemin)}
.ik-g figcaption{margin-top:10px;font-family:'Karla',sans-serif;font-size:var(--yazi-sm);
                 letter-spacing:.14em;color:var(--sonuk)}
.ik-git{display:inline-block;margin-top:20px;font-family:'Karla',sans-serif;font-size:17px;
        color:var(--pirinc);border-bottom:1px solid var(--kenar);padding-bottom:3px}
.ikili-kart:hover .ik-git{border-bottom-color:var(--pirinc)}

/* video daha net görünsün: üst karartma hafifledi, yazı bölgesi korundu */
.film::after{background:linear-gradient(to top,
  rgba(18,24,19,.97) 0%, rgba(18,24,19,.88) 14%,
  rgba(18,24,19,.42) 46%, rgba(18,24,19,.34) 100%)}

/* ================= AÇILIŞ: DİKEY VİDEO SÜTUNLARI ================= */
.perde-film{position:relative;min-height:calc(100vh - 104px);display:flex;
            flex-direction:column;overflow:hidden}
.sutunlar{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
          padding:6px;min-height:0}
.sutun{position:relative;overflow:hidden;background:var(--tahta);cursor:pointer;
       opacity:0;transform:translateY(26px) scale(.985);
       transition:opacity .8s var(--egri),transform .8s var(--egri),
                  box-shadow .5s ease,z-index 0s}
.sutunlar.acik .sutun{opacity:1;transform:none}
.sutunlar.acik .sutun[data-n="1"]{transition-delay:.15s}
.sutunlar.acik .sutun[data-n="2"]{transition-delay:.30s}
.sutunlar.acik .sutun[data-n="3"]{transition-delay:.45s}
.sutunlar.acik .sutun[data-n="4"]{transition-delay:.60s}
.sutunlar.acik .sutun[data-n="5"]{transition-delay:.75s}
.sutunlar.acik 
.sutun{background-size:cover;background-position:center}
.sutun video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
             opacity:0;transition:opacity .45s ease;will-change:opacity}
.sutun.oynuyor video{opacity:1}
.sutun .ortu{position:absolute;inset:0;background-size:cover;background-position:center;
             transform:scale(1);transition:transform .9s var(--egri),filter .6s ease;
             filter:saturate(.9) brightness(.72);will-change:transform}
.sutun.etkin .ortu{transform:scale(1.07);filter:saturate(1) brightness(1)}
.sutun::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,24,19,.85),rgba(18,24,19,.15) 55%);
  transition:opacity .6s ease;pointer-events:none}
.sutun.etkin{z-index:3;box-shadow:0 24px 70px -24px rgba(0,0,0,.85)}

.sutun.etkin::after{opacity:.25}

.perde-yazi-kat{position:relative;z-index:4;pointer-events:none;
                padding:0 var(--yan) var(--ar-6);max-width:var(--kap-en);
                margin:0 auto;width:100%}
.perde-yazi-kat > *{pointer-events:auto}
.perde-yazi-kat h1{font-size:clamp(30px,4.4vw,52px);line-height:1.14;max-width:18ch;
                   text-shadow:0 2px 26px rgba(7,10,8,.92)}
.perde-yazi-kat p{margin-top:18px;font-family:'Karla',sans-serif;font-size:var(--yazi-lg);
                  font-weight:400;line-height:1.7;color:#E2DED4;max-width:46ch;
                  text-shadow:0 1px 18px rgba(7,10,8,.9)}
.perde-yazi-kat .film-dugme{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.perde-yazi-kat .film-dugme a{text-decoration:none;font-family:'Karla',sans-serif;
  font-size:18px;padding:14px 28px;border:1px solid var(--kenar);color:var(--metin);
  background:rgba(18,24,19,.55);backdrop-filter:blur(6px);transition:.3s}
.perde-yazi-kat .film-dugme a:hover{border-color:var(--pirinc);color:var(--pirinc)}
.perde-yazi-kat .film-dugme a.dolu{background:var(--pirinc);border-color:var(--pirinc);color:var(--zemin)}

/* ================= KAYDIRDIKÇA BELİRME ================= */

/* ================= FORM DURUM MESAJI ================= */
.form-durum{grid-column:1/-1;margin-top:14px;padding:14px 18px;font-family:'Karla',sans-serif;
  font-size:var(--yazi-md);line-height:1.6;display:none;border:1px solid var(--kenar);background:var(--tahta)}
.form-durum.gorunur{display:block}
.form-durum.olumlu{border-color:var(--pirinc);color:var(--metin)}
.form-durum.olumsuz{border-color:rgba(226,75,74,.5);color:#E7C9C7}
.form .tuzak{position:absolute!important;left:-9999px!important}
.form button[disabled]{opacity:.55;cursor:default}

/* ================= ÇALIŞMA ALANLARI ================= */
.alan-sira{margin-top:30px;border-top:1px solid var(--kenar)}

/* ================= PROJE BRIEF FORMU ================= */
.ct-p{margin-top:14px;font-family:'Karla',sans-serif;font-size:17px;line-height:1.7;
      color:var(--govde);max-width:44ch}
.form label{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.form label .ops{font-style:normal;font-size:12.5px;letter-spacing:.06em;color:var(--sonuk);
                 text-transform:none;flex:none}
.form select:invalid{color:var(--sonuk)}
.form .tam textarea{min-height:120px}

/* perde ikinci kez açılışta hiç görünmesin (geçiş de olmasın) */
#perde.atlandi{transition:none;opacity:0;visibility:hidden}

/* ================= KLAVYE ERİŞİMİ ================= */
:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,video:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--pirinc);outline-offset:3px;border-radius:2px}
.sutun:focus-visible,.kart:focus-visible,.proje:focus-visible,
.ikili-kart:focus-visible,.ko button:focus-visible,.cizim button:focus-visible{
  outline:2px solid var(--pirinc);outline-offset:4px}
.diller a:focus-visible{outline-offset:4px}

/* içeriğe atla bağlantısı */
/* left:-9999px RTL'de sayfayı 10.000px taşırıyordu; dikey gizleme yön bağımsız */
.atla{position:absolute;inset-inline-start:12px;top:0;z-index:200;background:var(--pirinc);
  color:var(--zemin);font-family:'Karla',sans-serif;font-size:16px;padding:12px 20px;
  text-decoration:none;transform:translateY(-120%)}
.atla:focus{top:12px;transform:none}

/* ================= MOBİLYA SAYFASI ================= */
.mb-not{margin-top:var(--ar-2);font-family:'Karla',sans-serif;font-size:var(--yazi-sm);
        color:var(--sonuk);letter-spacing:.01em}
.mb-sira{display:grid;grid-template-columns:repeat(2,1fr);
         gap:var(--ar-6) var(--ar-yatay);margin-top:var(--ar-5)}
.mb{background:var(--tahta);border:1px solid var(--kenar);transition:border-color var(--sure-orta)}
.mb:hover{border-color:var(--pirinc)}
.mb-g{overflow:hidden;background:#EFEDE8}
.mb-g img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;
          transition:opacity var(--sure-hizli) ease}
.mb-g img.degisiyor{opacity:.25}
.mb-alt{padding:var(--ar-3) clamp(16px,2vw,24px) clamp(16px,2vw,22px)}
.mb-alt h3{font-weight:600;font-size:var(--yazi-xl);line-height:1.2;margin:0 0 var(--ar-2)}
.mb-kucukler{display:flex;gap:8px;flex-wrap:wrap}
.mb-kk{width:62px;height:52px;padding:0;cursor:pointer;background:#EFEDE8;
       border:1px solid var(--kenar);overflow:hidden;transition:border-color .3s,transform .3s;
       flex:none;line-height:0}
.mb-kk img{width:100%;height:100%;object-fit:contain;display:block}
.mb-kk:hover{border-color:var(--pirinc);transform:translateY(-2px)}
.mb-kk.acik{border-color:var(--pirinc);box-shadow:inset 0 0 0 1px var(--pirinc)}
.mb-tur{font-family:'Karla',sans-serif;font-size:var(--yazi-sm);color:var(--sonuk);
        margin:-6px 0 var(--ar-2);letter-spacing:.02em}

/* ================= KVKK ONAYI ================= */
.form .onay{margin-top:var(--ar-1)}
.form .onay label{display:flex;align-items:flex-start;gap:11px;margin:0;cursor:pointer;
  font-family:'Karla',sans-serif;font-size:var(--yazi-sm);line-height:1.65;
  color:var(--govde);text-transform:none;letter-spacing:0}
.form .onay input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--pirinc);
  padding:0;border:0;background:none;cursor:pointer}
.form .onay a{color:var(--pirinc);text-decoration:none;
  border-bottom:1px solid var(--kenar);padding-bottom:1px;white-space:nowrap}
.form .onay a:hover{border-bottom-color:var(--pirinc)}
/* tüm form alanları için ortak uyarı */
.alan-hata{display:none;margin-top:8px;padding:8px 13px;
  font-family:'Karla',sans-serif;font-size:var(--yazi-sm);line-height:1.5;
  color:#E7C9C7;background:rgba(226,75,74,.1);border-left:2px solid rgba(226,75,74,.55)}
.alan-hata.gorunur{display:block}
.form .onay .alan-hata{margin-left:30px}
.form .eksik input:not([type=checkbox]),
.form .eksik select,.form .eksik textarea{border-color:rgba(226,75,74,.55)}
.form .eksik input[type=checkbox]{outline:2px solid rgba(226,75,74,.6);outline-offset:2px}
.yasal{display:flex;gap:18px}
.yasal a{color:var(--sonuk);text-decoration:none;font-size:var(--yazi-sm)}
.yasal a:hover{color:var(--pirinc)}

/* ================= ETKİLEŞİM İNCELİKLERİ ================= */

/* bağlantı altı çizgisi soldan açılır */
.aciklama a,.kunye a,footer a:not(.yasal a),.yol a{
  position:relative;text-decoration:none;color:inherit}
.aciklama a::after,.kunye a::after,.yol a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--pirinc);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--egri)}
.aciklama a:hover::after,.kunye a:hover::after,.yol a:hover::after{
  transform:scaleX(1);transform-origin:left}

/* menü: aktif bağlantının altı, üzerine gelince genişler */
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--pirinc);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--egri)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
nav a.acik::after{transform:scaleX(1)}

/* düğmeler: pirinç dolgu içeriden yayılır */
.film-dugme a,.cta a,.suzgec button{position:relative;overflow:hidden;isolation:isolate}
.film-dugme a::before,.cta a::before,.suzgec button::before{
  content:"";position:absolute;inset:0;background:var(--pirinc);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--egri)}
.film-dugme a:hover::before,.cta a:hover::before,.suzgec button:hover::before{transform:scaleY(1)}
.film-dugme a:hover,.cta a:hover,.suzgec button:hover{color:var(--zemin);border-color:var(--pirinc)}
.film-dugme a.dolu:hover::before,.suzgec button.acik::before{transform:scaleY(1)}

/* kart görselleri: üzerine gelince yavaşça yakınlaşır */
.kart-g img,.proje img,.ko img,.band img{
  transition:transform 1.1s var(--egri),filter var(--sure-orta) ease}
.kart:hover .kart-g img,.proje:hover img,.ko button:hover img{
  transform:scale(1.05);filter:none}

/* çizim kutusu: üzerine gelince kenarı canlanır */
.cizim{transition:border-color var(--sure-orta),transform var(--sure-orta) var(--egri)}
.cizim:hover{border-color:var(--pirinc)}

/* büyütme penceresi yumuşak açılsın */
#lup{transition:opacity .4s var(--egri),visibility .4s}

/* WhatsApp düğmesi nefes alsın (çok hafif) */
.wa{transition:transform .5s var(--egri),box-shadow .5s var(--egri)}
.wa:hover{transform:translateY(-3px) scale(1.03)}

/* ================= BAŞLIK: KELİME KELİME ================= */
h1[data-bolundu]{opacity:1}
.kel{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.kel i{display:inline-block;font-style:inherit;
  transform:translate3d(0,110%,0);
  transition:transform .95s var(--egri-giris);
  transition-delay:calc(var(--k,0) * 85ms)}
h1.acildi .kel i{transform:none}

/* ================= BÜYÜK GÖRSELLERDE DERİNLİK ================= */
.derin{transform:scale(1.12);will-change:transform}
.band,.genis,.vitrin .orta,.kart-g{overflow:hidden}

/* ================= MALZEME PALETİ ================= */
.malz{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ar-3);margin-top:var(--ar-4)}
.malz-k{position:relative;padding:0;border:1px solid var(--kenar);background:none;
  cursor:default;text-align:left;overflow:hidden;
  transition:border-color var(--sure-orta) var(--egri)}
.malz-k{--renk:var(--tahta)}
.malz-k::before{content:"";display:block;height:118px;background:var(--renk);
  transition:transform .8s var(--egri),filter .6s ease;transform-origin:center}
.malz-k:hover{border-color:var(--pirinc)}
.malz-k:hover::before{transform:scale(1.06)}
.malz-ad{display:block;padding:14px 16px 2px;font-family:'Bodoni Moda',serif;
  font-weight:600;font-size:var(--yazi-md);color:var(--metin);letter-spacing:0}
.malz-ac{display:block;padding:0 16px 16px;font-family:'Karla',sans-serif;
  font-size:13.5px;line-height:1.55;color:var(--sonuk);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--egri),opacity .45s ease,padding .55s var(--egri)}
.malz-k:hover .malz-ac{max-height:90px;opacity:1}
html[dir="rtl"] .malz-k{text-align:right}

/* ================= ÖLÇÜ ÇİZGİLERİ ================= */
.olcu{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);
  margin-top:var(--ar-4);padding-top:var(--ar-3)}
.olcu-s{flex:1;min-width:160px;display:flex;flex-direction:column;gap:9px}
.olcu-s b{font-family:'Karla',sans-serif;font-weight:400;font-size:var(--yazi-sm);
  letter-spacing:.1em;color:var(--sonuk)}
/* mimari ölçü çizgisi: iki ucunda dik kesme, ortada ok */
.olcu-c{position:relative;display:block;height:9px}
.olcu-c::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;
  background:var(--pirinc);opacity:.75;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--egri-giris)}
.olcu-c::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;
  border-left:1px solid var(--pirinc);border-right:1px solid var(--pirinc);opacity:0;
  transition:opacity .5s ease .75s}
.olcu.gorundu .olcu-c::before{transform:scaleX(1)}
.olcu.gorundu .olcu-c::after{opacity:.75}
html[dir="rtl"] .olcu-c::before{transform-origin:right}

/* ===== J. SEÇİM RENGİ ===== */
::selection{background:var(--pirinc);color:var(--zemin)}
::-moz-selection{background:var(--pirinc);color:var(--zemin)}

/* ===== B. BAŞLIKLARDA HARF ARALIĞI TOPARLANMASI =====
   h1 kelime kelime açılıyor (13. bölüm), h2 harf aralığıyla gelir */
.kap h2{letter-spacing:.07em}
.kap h2.gorundu{letter-spacing:0;transition:letter-spacing 1s var(--egri-giris)}

/* ===== H. RAKAM BİRİMİ KAYARAK OTURSUN ===== */
/* birim: sayaç çalışmazsa da görünür kalır (opaklık 1'den başlar) */
.rakam b .birim{display:inline-block}
.rakam:not(.sayildi) b .birim{opacity:0;transform:translate3d(-6px,0,0) scale(.92)}
.rakam b .birim{transition:opacity .5s ease .55s,transform .7s var(--egri-giris) .55s}
.rakam.sayildi .birim{opacity:1;transform:none}

/* ===== I. TELEFON MENÜSÜ: MADDELER SIRAYLA ===== */
#mnu .mnu-logo,#mnu .mnu-nav a,#mnu .mnu-alt > *{
  opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .5s var(--egri-giris),transform .62s var(--egri-giris)}
#mnu.acik .mnu-logo,#mnu.acik .mnu-nav a,#mnu.acik .mnu-alt > *{opacity:1;transform:none}
#mnu.acik .mnu-logo{transition-delay:.06s}
#mnu.acik .mnu-nav a:nth-child(1){transition-delay:.12s}
#mnu.acik .mnu-nav a:nth-child(2){transition-delay:.18s}
#mnu.acik .mnu-nav a:nth-child(3){transition-delay:.24s}
#mnu.acik .mnu-nav a:nth-child(4){transition-delay:.30s}
#mnu.acik .mnu-nav a:nth-child(5){transition-delay:.36s}
#mnu.acik .mnu-nav a:nth-child(6){transition-delay:.42s}
#mnu.acik .mnu-nav a:nth-child(7){transition-delay:.48s}
#mnu.acik .mnu-alt > *:nth-child(1){transition-delay:.54s}
#mnu.acik .mnu-alt > *:nth-child(2){transition-delay:.58s}
#mnu.acik .mnu-alt > *:nth-child(3){transition-delay:.62s}
#mnu.acik .mnu-alt > *:nth-child(4){transition-delay:.66s}

/* ===== D. İMLEÇ IŞIĞI ===== */
.imlec-isik{position:fixed;left:0;top:0;width:100px;height:100px;
  margin:-50px 0 0 -50px;pointer-events:none;z-index:1;
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(198,156,99,.075), rgba(198,156,99,.028) 45%, transparent 72%);
  opacity:0;transition:opacity .6s ease;will-change:transform}
.imlec-isik.acik{opacity:1}
/* içerik ışığın üstünde kalsın */
.kap{position:relative;z-index:2}

/* ===== A. SAYFA GEÇİŞİ: VIEW TRANSITIONS =====
   Chrome, Edge, Safari 18.2+ destekliyor. Firefox'ta sayfa
   normal açılır — kırılmaz, sadece animasyon olmaz. */
@view-transition{ navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.42s;
  animation-timing-function:var(--egri-giris)}
::view-transition-old(root){animation-name:vtCik}
::view-transition-new(root){animation-name:vtGir}
@keyframes vtCik{ to{opacity:0;transform:translate3d(0,-14px,0)} }
@keyframes vtGir{ from{opacity:0;transform:translate3d(0,18px,0)} }

/* NOT: sabit konumlu öğelere (sticky header, sabit WhatsApp düğmesi)
   geçiş adı verilmiyor — iki sayfanın görüntüsü üst üste biniyor. */

/* proje kartı → proje sayfası: görsel devralınır (yalnız geniş ekran) */

::view-transition-group(proje-kapak){animation-duration:.55s;
  animation-timing-function:var(--egri-giris)}
::view-transition-old(proje-kapak),
::view-transition-new(proje-kapak){
  height:100%;object-fit:cover;overflow:clip}

/* ===== F. KATMAN DERİNLİĞİ ===== */
.katman{position:relative;
  transition:transform .9s var(--egri-giris),box-shadow .9s var(--egri-giris)}
.katman-acik{transform:translate3d(0,-6px,0);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.95)}

/* ================= KONSEPT: ALT SÜZGEÇ ================= */
.suzgec-alt{display:none;flex-wrap:wrap;gap:8px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--kenar)}
.suzgec-alt.acik{display:flex}
.suzgec-alt button{background:none;border:1px solid transparent;
  padding:6px 13px;cursor:pointer;
  font-family:'Karla',sans-serif;font-size:var(--yazi-sm);
  color:var(--sonuk);letter-spacing:.01em;
  transition:color .3s,border-color .3s}
.suzgec-alt button:hover{color:var(--metin);border-color:var(--kenar)}
.suzgec-alt button.acik{color:var(--pirinc);border-color:var(--pirinc)}

/* ================= MOBİLYA: SÜZGEÇ ve OKLAR ================= */
.mb-suzgec{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--ar-4)}
.mb-suzgec button{background:none;border:1px solid var(--kenar);
  padding:8px 16px;cursor:pointer;
  font-family:'Karla',sans-serif;font-size:var(--yazi-sm);
  color:var(--sonuk);letter-spacing:.01em;
  transition:color .3s,border-color .3s,background .3s}
.mb-suzgec button:hover{color:var(--metin);border-color:var(--pirinc)}
.mb-suzgec button.acik{color:var(--zemin);background:var(--pirinc);border-color:var(--pirinc)}

.mb-g{position:relative}
.mb-ok{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(18,24,19,.62);border:1px solid rgba(231,227,216,.22);
  color:var(--metin);font-size:22px;line-height:1;
  opacity:0;transition:opacity .35s var(--egri),background .3s,border-color .3s}
.mb:hover .mb-ok,.mb-ok:focus-visible{opacity:1}
.mb-ok:hover{background:var(--pirinc);border-color:var(--pirinc);color:var(--zemin)}
.mb-sol{left:12px} .mb-sag{right:12px}
html[dir="rtl"] .mb-sol{left:auto;right:12px}
html[dir="rtl"] .mb-sag{right:auto;left:12px}
.mb.gizli{display:none}

/* ================= BÜYÜTME PENCERESİ =================
   Görsel doğal boyutunu aşmaz; bulanıklaşma olmaz.
   Küçük görsel ortada durur, büyük çizim kaydırılır. */
#lup .sahne{cursor:zoom-out;overflow:hidden;display:flex;align-items:center;justify-content:center}
#lup .kare{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:0;margin:0}
#lup-g{width:auto;height:auto;display:block;cursor:default;object-fit:contain}

/* Arapçada büyük-küçük harf ayrımı yoktur */
html[lang="ar"] .rozet,html[lang="ar"] .bilgi b,html[lang="ar"] .serit-grup{text-transform:none}

/* ================= HAKKINDA: BAĞLANTI ================= */
.baglanti{margin-top:var(--ar-3)}
.baglanti a{display:inline-flex;align-items:center;gap:11px;
  padding:13px 20px;border:1px solid var(--kenar);text-decoration:none;
  font-family:'Karla',sans-serif;font-size:var(--yazi-md);color:var(--metin);
  transition:border-color var(--sure-orta),color var(--sure-orta),background var(--sure-orta)}
.baglanti a svg{flex:none;color:var(--pirinc);transition:color var(--sure-orta)}
.baglanti a:hover{border-color:var(--pirinc);background:var(--pirinc);color:var(--zemin)}
.baglanti a:hover svg{color:var(--zemin)}
.baglanti a::after{display:none}

/* =====================================================================
   TELEFON DÜZENİ — TOPLU AYAR
   Bu bölüm en sonda olduğu için önceki mobil kuralları geçersiz kılar.
   Masaüstü görünümüne hiç dokunmaz: her şey 
.band,.serit{max-width:100vw}

/* ===== TÜM EKRAN KURALLARI — geniş ekrandan dara doğru ===== */

/* ===== C. RENK SIZMASI =====
   Zemin rengine DOKUNULMAZ. Üstüne sabit, çok soluk bir ton
   katmanı konur; kaydırdıkça rengi değişir. Alfa 0.05'i geçmez,
   böylece metin kontrastı hiçbir noktada bozulmaz. */
.ton{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--ton-renk,transparent);
  transition:background 1.4s var(--egri);
  opacity:.9}

/* ===== G. IŞIK YÖNÜ =====
   Görselin kendisine filtre uygulanmaz — renk ve netlik bozulmaz.
   Üstüne konan gradyanın yönü kaydırmayla döner. Alfa ≤ .07. */
.isik{position:relative}
.isik::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(var(--isik-aci,160deg),
    rgba(255,244,225,.055) 0%, transparent 38%,
    transparent 62%, rgba(0,0,0,.07) 100%);
  transition:background 1.1s linear;opacity:.55}

/* ================= HAKKINDA: PORTRE =================
   Görsel sol kenarda, başlıkla aynı hizada. Sağında metin,
   en sağda bilerek bırakılmış boşluk. */
.portre{display:grid;
  grid-template-columns:1.1fr 1.7fr 0.9fr;
  gap:clamp(24px,3.5vw,56px);
  align-items:start;margin-top:var(--ar-5)}
.portre-g{grid-column:1;margin:0;overflow:hidden;background:var(--tahta)}
.portre-g img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;
  filter:saturate(.94) brightness(.96);
  transition:transform 1.1s var(--egri),filter var(--sure-orta) ease}
.portre-g:hover img{transform:scale(1.03);filter:none}
.portre-y{grid-column:2;display:flex;flex-direction:column;gap:var(--ar-3);
  padding-top:clamp(6px,1.5vh,20px)}
.portre-y .aciklama{margin:0;max-width:56ch}
html[dir="rtl"] .portre{grid-template-columns:0.9fr 1.7fr 1.1fr}
html[dir="rtl"] .portre-g{grid-column:3}
html[dir="rtl"] .portre-y{grid-column:2}

/* ================= KENAR İLERLEME GÖSTERGESİ ================= */
.ray{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:30;
  display:flex;align-items:center;gap:14px;pointer-events:none;
  opacity:0;transition:opacity .5s var(--egri)}
.ray.acik{opacity:1}
.ray-cizgi{width:1px;height:140px;background:var(--kenar);position:relative}
.ray-cizgi i{position:absolute;inset:0;background:var(--pirinc);
  transform:scaleY(0);transform-origin:top;will-change:transform}
.ray-ad{font-family:'Karla',sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sonuk);white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);max-height:220px;overflow:hidden}
html[dir="rtl"] .ray{left:auto;right:26px}

/* ================= KAYAN YAZI ŞERİDİ ================= */
.serit{position:relative;margin:var(--ar-7) calc(50% - 50vw);width:100vw;
  padding:var(--ar-4) 0;overflow:hidden;
  border-top:1px solid var(--kenar);border-bottom:1px solid var(--kenar);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.serit-ic{display:flex;width:max-content;animation:seritKay 38s linear infinite;
  will-change:transform}
.serit:hover .serit-ic{animation-play-state:paused}
.serit-grup{display:inline-flex;align-items:center;gap:26px;padding-right:26px;text-transform:uppercase;
  font-family:'Bodoni Moda',serif;font-weight:400;
  font-size:clamp(20px,2.6vw,32px);letter-spacing:.06em;
  color:var(--metin);opacity:.5;white-space:nowrap}
.serit-grup span{color:var(--pirinc);opacity:.9}
@keyframes seritKay{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

/* ================= SABİT PROJE KÜNYESİ ================= */
/* geniş ekranda künye kaydırma boyunca üstte kalır */

/* ================= GİRİŞ HAREKETLERİ =================
   Tümü transform + opacity üzerinden — düzen hesabı tetiklenmez. */

[data-gir]{opacity:0;will-change:transform,opacity}
[data-gir].gorundu{opacity:1;will-change:auto}
[data-gir]{transition:opacity var(--gir-sure) var(--egri-giris),
                      transform var(--gir-sure) var(--egri-giris),
                      clip-path var(--gir-sure) var(--egri-giris),
                      filter var(--gir-sure) ease}

[data-gir="yuksel"]{transform:translate3d(0,26px,0)}
[data-gir="yuksel"].gorundu{transform:none}

[data-gir="sol"]{transform:translate3d(-34px,0,0)}
[data-gir="sag"]{transform:translate3d(34px,0,0)}
[data-gir="sol"].gorundu,[data-gir="sag"].gorundu{transform:none}

[data-gir="buyu"]{transform:scale(1.045)}
[data-gir="buyu"].gorundu{transform:none}

[data-gir="net"]{transform:scale(1.03);filter:brightness(.55) saturate(.7)}
[data-gir="net"].gorundu{transform:none;filter:none}

/* teknik çizim rulo gibi açılır */
[data-gir="acil"]{clip-path:inset(0 100% 0 0)}
[data-gir="acil"].gorundu{clip-path:inset(0 0 0 0)}
html[dir="rtl"] [data-gir="acil"]{clip-path:inset(0 0 0 100%)}
html[dir="rtl"] [data-gir="acil"].gorundu{clip-path:inset(0 0 0 0)}

/* sıralı giriş */
[data-sira]{transition-delay:calc(var(--i,0) * var(--gir-gecik))}
.ko[data-gir]{--gir-sure:.6s}

/* başlık: harf aralığı toparlanır + altına çizgi çekilir */
.kap h2{letter-spacing:.07em}
.kap h2.gorundu{letter-spacing:0;transition:letter-spacing 1s var(--egri-giris)}
h2 > span{position:relative;display:inline-block}
h2 > span::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;
  background:var(--pirinc);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--egri-giris) .12s}
html[dir="rtl"] h2 > span::after{transform-origin:right}
h2.gorundu > span::after{transform:scaleX(1)}


/* =====================================================================
   TELEFON HAREKETLERİ
   Dokunmatik cihazda hover yok; karşılığı basma geri bildirimi.
   Tümü transform/opacity — kare düşmez.
   ===================================================================== */

/* --- 1. BASMA GERİ BİLDİRİMİ --- */
@media(hover:none){
  .kart,.proje,.ikili-kart,.ko button,.mb,.malz-k,
  .suzgec button,.suzgec-alt button,.mb-suzgec button,
  .film-dugme a,.cta a,.mnu-nav a,.baglanti a,.mb-kk,.mb-ok,
  .diller a,.yasal a,.form button,.wa{
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s cubic-bezier(.3,.7,.4,1),
               opacity .18s ease, border-color .25s ease}
  .kart:active,.proje:active,.ikili-kart:active,.mb:active,.malz-k:active{
    transform:scale(.978)}
  .ko button:active{transform:scale(.955)}
  .suzgec button:active,.suzgec-alt button:active,.mb-suzgec button:active,
  .mb-kk:active,.mb-ok:active,.diller a:active,.yasal a:active{
    transform:scale(.93);opacity:.75}
  .film-dugme a:active,.cta a:active,.form button:active,.baglanti a:active{
    transform:scale(.96);opacity:.85}
  .mnu-nav a:active{transform:translateX(6px);opacity:.7}
  html[dir="rtl"] .mnu-nav a:active{transform:translateX(-6px)}
  .wa:active{transform:scale(.94)}
  /* hover efektleri dokunmatikte devreye girmesin */
  .kart:hover .kart-g img,.proje:hover img,.ko button:hover img,
  .mb:hover .mb-g img,.malz-k:hover::before,.portre-g:hover img{transform:none}
}

/* --- 2. BAŞLIK ÇUBUĞU KÜÇÜLMESİ --- */
@media(max-width:820px){
  header{transition:padding .3s var(--egri),background .3s ease,
                    box-shadow .35s var(--egri)}
  header .logo img{transition:height .3s var(--egri)}
  header.kucuk{padding-top:5px;padding-bottom:5px;
    background:rgba(18,24,19,.93);backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--kenar)}
  header.kucuk .logo img{height:38px}
  /* yukarı kaydırınca geri açılır, aşağı inerken gizlenir */
  header{will-change:transform}
  header.gizli{transform:translateY(-102%)}
  header{transition:padding .3s var(--egri),background .3s ease,
                    box-shadow .35s var(--egri),transform .38s var(--egri)}
}

/* --- 5. KAYDIRMA İLERLEME ÇİZGİSİ --- */
.ilerleme{position:fixed;left:0;top:0;height:2px;z-index:45;
  background:var(--pirinc);transform:scaleX(0);transform-origin:left;
  width:100%;pointer-events:none;will-change:transform;display:none}
html[dir="rtl"] .ilerleme{transform-origin:right}
@media(max-width:820px){ .ilerleme{display:block} }

@media(prefers-reduced-motion:reduce){
  .ilerleme{display:none}
  header,header.kucuk,header.gizli{transition:none;transform:none}
  .kart:active,.proje:active,.ko button:active,.mb:active,.malz-k:active,
  .suzgec button:active,.mb-suzgec button:active,.cta a:active,.wa:active{transform:none}
}

/* ===== EKRAN ve TERCİH KURALLARI — geniş ekrandan dara ===== */

@media(min-width:900px){
  .vt-kapak{view-transition-name:proje-kapak}
}

@media(min-width:1100px){
  .kunye{position:sticky;top:96px;z-index:5;
    background:linear-gradient(to bottom,var(--zemin) 88%,transparent);
    padding-bottom:10px;margin-top:var(--ar-4);
    transition:box-shadow .4s var(--egri)}
  .kunye.yapisti{box-shadow:0 18px 30px -26px rgba(0,0,0,.9)}
}

@media(max-width:1200px){ .ray{display:none} }

@media(max-width:1000px){
  .izgara{grid-template-columns:repeat(4,1fr);gap:var(--ar-2)}
  .ko,.ko.genis,.ko.dar,.ko.esit2,.ko.esit3,.ko.esit4{grid-column:span 2}
  .ko.esit1{grid-column:span 4}
  .ko img,.ko.genis img,.ko.dar img,.ko.esit2 img,.ko.esit3 img,.ko.esit4 img{aspect-ratio:3/4}
  .ko.esit1 img{aspect-ratio:16/9}
}

@media(max-width:1000px){ .katman-acik{transform:none;box-shadow:none} }

@media(max-width:1000px){ .isik::after{display:none} }

@media(max-width:1000px){
  .portre,html[dir="rtl"] .portre{grid-template-columns:1fr 1.5fr;gap:var(--ar-3)}
  .portre-g,html[dir="rtl"] .portre-g{grid-column:1}
  .portre-y,html[dir="rtl"] .portre-y{grid-column:2}
}

@media(max-width:900px){
  .perde-film{min-height:auto;padding-bottom:34px}
  .sutunlar{grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;
            height:56vh;min-height:320px}
  .sutun[data-n="4"],.sutun[data-n="5"]{display:none}
  .perde-yazi-kat{padding-top:30px}
  .perde-yazi-kat h1{font-size:clamp(28px,7.4vw,38px)}
  .perde-yazi-kat p{font-size:17.5px;margin-top:16px}
  .perde-yazi-kat .film-dugme a{flex:1;text-align:center;font-size:16px;padding:12px 18px}
}

@media(max-width:900px){ .derin{transform:none} }

@media(max-width:900px){
  .rakam{grid-template-columns:1fr 1fr}
  .adimlar{grid-template-columns:1fr;gap:26px}
  .adimlar::before{display:none}
  .adimlar .no{margin:0 0 16px}
  .adimlar .ok{display:none!important}
  .detay{grid-template-columns:1fr}
  .band img{aspect-ratio:16/9}
  .tek-ekran{grid-template-columns:1fr;min-height:0;padding:20px 0 50px}
  .vitrin{grid-template-columns:1fr} .vitrin .orta{order:-1} .vitrin dl{gap:0} .vitrin .altyazi{grid-column:1}
  .hizmetler{grid-template-columns:1fr}
  .projeler,.kart,.form{grid-template-columns:1fr}
  .kart:nth-child(even) .kart-g{order:0}
  .cizim.anahtarli .ciz-govde{grid-template-columns:1fr}
  .notlar > div{grid-template-columns:1fr;gap:2px}
  .cta{flex-direction:column;align-items:flex-start}
  .cta a{width:100%;text-align:center}
}

@media(max-width:820px){ .serit{padding:var(--ar-3) 0;margin:var(--ar-6) calc(50% - 50vw)} }

@media(max-width:820px){
  header{flex-wrap:wrap;row-gap:10px}
  header .logo img{height:58px}
  nav{gap:18px;order:3;width:100%;padding-top:2px}
  nav a{font-size:17px}
  .cizimler{padding:0}
  .cizim{border-left:0;border-right:0;padding:12px}
}

@media(max-width:820px){
  .mnu{display:flex}
  header nav{display:none}
  header .diller{display:none}
  header{flex-wrap:nowrap;row-gap:0;padding:10px clamp(16px,4vw,24px)}
  header .logo img{height:52px}

  .film{min-height:78vh;padding-bottom:var(--ar-5)}
  .film-yazi h1{font-size:clamp(28px,8vw,38px)}
  .film-yazi p{font-size:17.5px}
  .film-dugme{gap:10px}
  .film-dugme a{font-size:16px;padding:12px 20px;flex:1;text-align:center}

  .stüdyo{font-size:clamp(20px,5.6vw,26px);max-width:none;margin-top:46px}
  .rakam{grid-template-columns:1fr 1fr;gap:0 20px}
  .rakam b{font-size:clamp(28px,8vw,36px)}
  .aciklama{font-size:18px;max-width:none}
  h2{font-size:clamp(22px,6.2vw,27px)}
  .band img{aspect-ratio:4/3}
  .cta{flex-direction:column;align-items:flex-start;gap:16px}
  .cta a{width:100%;text-align:center}

  .kunye{grid-template-columns:1fr;gap:0}
  .kunye dd{font-size:18px}
  .vitrin dl{gap:0}
  .vitrin dl div{padding:14px 0}

  /* çizim penceresi: telefonda iki yöne kaydırma */
  #lup .sahne{overflow:auto;padding:14px;-webkit-overflow-scrolling:touch}
  #lup .kare{max-width:none;width:max-content}
  #lup-g{width:auto;max-width:none;height:auto;min-height:0}
  #lup .cubuk{font-size:15px;padding:11px 14px}
  #lup .cubuk span{display:none}

  .ko figcaption{font-size:14px}
  .suzgec{gap:7px;padding-top:18px}
  .suzgec button{font-size:var(--yazi-sm);padding:8px 13px}


  .tek-ekran{grid-template-columns:1fr;min-height:0;padding:16px 0 40px;gap:30px}
  .form{grid-template-columns:1fr;gap:14px}

  .wa{right:14px;bottom:14px;padding:14px;gap:0}
  .wa-yazi{display:none}
  [dir="rtl"] .wa{left:14px;right:auto}
  footer{flex-direction:column;gap:14px;font-size:15px}
  .detay{gap:20px}
}

@media(max-width:820px){
  .kap{padding:0 24px}
  h2{margin-top:62px;padding-bottom:14px}
  .aciklama{margin:26px 0;line-height:1.85}
  .altyazi{margin-top:14px}

  .film-yazi p{margin-top:22px}
  .film-dugme{margin-top:30px}

  .stüdyo{margin-top:58px;line-height:1.5}
  .rakam{margin-top:40px;gap:0 24px}
  .rakam div{padding:26px 0}
  .rakam b{margin-bottom:10px}

  .projeler{gap:30px;margin-top:30px}
  .proje h3{margin:20px 0 6px}
  .proje dl{gap:8px 18px}

  .adimlar{margin-top:26px}
  .adimlar article{padding:24px 20px 20px}
  .adimlar h3{margin:12px 0 12px}

  .band{margin-top:62px}
  .detay{margin-top:50px;gap:26px}
  .detay .rozet{text-transform:uppercase;margin-top:6px}
  .cta{margin-top:62px;padding:30px 24px;gap:20px}

  .liste{gap:56px;margin-top:38px}
  .kart{gap:22px}
  .kart p{margin-bottom:24px}
  .kart dl{gap:11px 20px;padding-top:20px}

  .hiz-sira{margin-top:26px}
  .izgara{gap:14px}
  .ust{padding:38px 0 6px}
  .yol{margin-bottom:22px}
  footer{margin-top:60px;padding:28px 0 90px}
  .cizimler{margin-top:34px;gap:30px}
  .notlar{margin-top:20px;padding-top:18px}
  .notlar > div{padding:10px 0}
}

@media(max-width:820px){
  /* geniş görsel bandı telefonda kalkıyor — masaüstünde duruyor */
  .band{display:none}
  .acilis-blok{margin-top:52px}
  .ik-bas{margin-bottom:16px}
  .ik-g{gap:10px}
  .ik-g img{aspect-ratio:1/1}
  .ik-meta{font-size:15px}
  .ikili-kart{margin-top:26px;padding:16px}
  .adimlar p{font-size:16px}
}

@media(max-width:820px){
  .hiz{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:var(--ar-2)}
  .hiz .g,.hiz-sira .hiz:nth-child(even) .g,.alan-sira .hiz:nth-child(even) .g{grid-column:1;grid-row:1}
  .hiz .no,.hiz h3,.hiz p,
  .hiz-sira .hiz:nth-child(even) .no,.hiz-sira .hiz:nth-child(even) h3,
  .hiz-sira .hiz:nth-child(even) p,.alan-sira .hiz:nth-child(even) .no,
  .alan-sira .hiz:nth-child(even) h3,.alan-sira .hiz:nth-child(even) p{grid-column:1}
  .hiz .no{grid-row:2;margin-top:var(--ar-2)} .hiz h3{grid-row:3} .hiz p{grid-row:4}
  .hiz .g img{aspect-ratio:16/9}
}

@media(max-width:820px){
  .mb-sira{grid-template-columns:1fr;gap:var(--ar-5)}
  .mb-alt{padding:var(--ar-3)}
  .mb-kk{width:66px;height:56px}
}

@media(max-width:820px){ .yasal{gap:14px} }

@media(max-width:820px){
  .malz{grid-template-columns:repeat(2,1fr);gap:var(--ar-2)}
  .malz-k::before{height:92px}
  .malz-ac{max-height:90px;opacity:1;padding:0 14px 14px}
}

@media(max-width:820px){
  .suzgec-alt{gap:6px}
  .suzgec-alt button{padding:5px 11px;font-size:13.5px}
}

@media(max-width:820px){
  .mb-ok{width:38px;height:38px;font-size:20px}
  .mb-sol{left:8px} .mb-sag{right:8px}
}

@media(max-width:820px){

  /* --- genel ölçek: telefonda her şey bir tık küçülsün --- */
  :root{
    --yazi-lg:17px; --yazi-md:15.5px; --yazi-sm:13.5px;
    --yazi-xl:clamp(19px,4.6vw,23px);
    --yazi-2xl:clamp(21px,5.2vw,26px);
    --yazi-3xl:clamp(25px,6.6vw,34px);
    --yazi-4xl:clamp(27px,7.4vw,38px);
    --ar-5:clamp(24px,4vh,34px);
    --ar-6:clamp(28px,4.6vh,42px);
    --ar-7:clamp(32px,5.4vh,48px);
  }
  .kap{padding:0 18px}
  .ust{padding-top:var(--ar-4)}
  .aciklama{font-size:16px;line-height:1.65}
  h2{margin-top:var(--ar-6)}

  /* --- rakam şeridi: dört satır yerine iki sütun --- */
  .rakam{grid-template-columns:1fr 1fr;gap:0 16px;margin-top:var(--ar-4)}
  .rakam > div{padding:14px 0}
  .rakam b{font-size:clamp(26px,7vw,34px)}
  .rakam span{font-size:12.5px;line-height:1.4}

  /* --- nasıl çalışıyoruz: kart yerine sıkı liste --- */
  .adimlar{gap:0;margin-top:var(--ar-3)}
  .adimlar article{padding:16px 0;border:0;border-bottom:1px solid var(--kenar);
    background:none;display:grid;grid-template-columns:44px 1fr;gap:0 14px;align-items:baseline}
  .adimlar .no{grid-row:1/3;width:auto;height:auto;border:0;border-radius:0;margin:0;
    font-family:'Bodoni Moda',serif;font-weight:600;font-size:22px;color:var(--pirinc)}
  .adimlar h3{grid-column:2;font-size:18px;margin:0 0 4px}
  .adimlar p{grid-column:2;font-size:14.5px;line-height:1.55;margin:0}
  .adimlar .ok{display:none}

  /* --- projeler: kapak görselleri büyüsün --- */
  .projeler{gap:var(--ar-5)}
  .kart{gap:0}
  .kart-g img,.proje img{aspect-ratio:4/3;width:100%}
  .kart-govde{padding:14px 0 0}
  .kart h3{font-size:22px}

  /* --- proje sayfası: üst üste binmeyi bitir --- */
  .kunye{gap:0;margin-top:var(--ar-4)}
  .kunye div{padding:13px 0}
  .kunye dt{font-size:12.5px;margin-bottom:3px}
  .kunye dd{font-size:16px;line-height:1.4}
  .olcu{flex-direction:column;gap:16px;margin-top:var(--ar-4)}
  .olcu-s{min-width:0;gap:6px}
  .band,.genis{margin-top:var(--ar-5)}
  .altyazi{font-size:13px;line-height:1.5;margin-top:8px}

  /* --- hizmetler: telefonda görsel yok, sadece metin --- */
  .hiz .g{display:none}
  .hiz{grid-template-columns:38px 1fr;grid-template-rows:auto auto;
    gap:0 12px;padding:18px 0;align-items:baseline}
  .hiz .no{grid-column:1;grid-row:1/3;font-size:14px;color:var(--pirinc)}
  .hiz h3{grid-column:2;grid-row:1;font-size:18px;margin:0 0 5px}
  .hiz p{grid-column:2;grid-row:2;font-size:14.5px;line-height:1.55;max-width:none}
  .hiz-sira .hiz:nth-child(even) .no,.alan-sira .hiz:nth-child(even) .no{grid-column:1}
  .hiz-sira .hiz:nth-child(even) h3,.hiz-sira .hiz:nth-child(even) p,
  .alan-sira .hiz:nth-child(even) h3,.alan-sira .hiz:nth-child(even) p{grid-column:2}

  /* --- konsept: sayaç düğmenin içine, boşluk kapansın --- */
  #sayac{display:none}
  .suzgec{gap:7px;margin-top:var(--ar-3)}
  .suzgec button{padding:7px 13px;font-size:13.5px}
  .suzgec button[data-say]::after{content:" " attr(data-say);opacity:.6;font-size:11.5px}
  .suzgec-alt{margin-top:9px;padding-top:9px}
  .izgara{margin-top:var(--ar-3);gap:8px}

  /* --- mobilya: iki sütun, parmakla kaydırma --- */
  .mb-suzgec{gap:7px;margin-top:var(--ar-3)}
  .mb-suzgec button{padding:7px 13px;font-size:13.5px}
  .mb-sira{grid-template-columns:1fr 1fr;gap:var(--ar-3) 10px;margin-top:var(--ar-3)}
  .mb-g{touch-action:pan-y}
  .mb-g img{aspect-ratio:1/1}
  .mb-alt{padding:10px 12px 12px}
  .mb-alt h3{font-size:17px;margin:0}
  .mb-tur{font-size:12.5px;margin:2px 0 8px}
  .mb-kucukler{gap:5px}
  .mb-kk{width:34px;height:30px}
  .mb-ok{width:32px;height:32px;font-size:17px;opacity:.85}
  .mb-sol{left:5px} .mb-sag{right:5px}

  /* --- malzeme, şerit, iletişim --- */
  .malz{gap:10px;margin-top:var(--ar-3)}
  .malz-k::before{height:74px}
  .malz-ad{padding:10px 12px 2px;font-size:15px}
  .malz-ac{padding:0 12px 12px;font-size:12.5px}
  .serit{margin:var(--ar-6) calc(50% - 50vw);padding:14px 0}
  .serit-grup{font-size:17px;gap:18px;padding-right:18px}
  .form{gap:14px}
  .form label{font-size:12.5px}
  .form input,.form select,.form textarea{font-size:16px;padding:11px 13px}
  .cta{padding:24px 18px}
  .cta p{font-size:17px}
  footer{padding:24px 0 84px;font-size:13px}
}

@media(max-width:820px){
  /* tam genişlik bloklar kenar boşluğunu yutmasın */
  .band{width:auto;margin-left:0;transform:none;
    margin-inline:calc(var(--ar-3) * -1)}
  .serit{margin-inline:-18px;width:auto}
}

@media(max-width:760px){
  .portre,html[dir="rtl"] .portre{grid-template-columns:1fr;gap:var(--ar-3)}
  .portre-g,.portre-y,html[dir="rtl"] .portre-g,html[dir="rtl"] .portre-y{grid-column:1}
}

@media(max-width:560px){
  .izgara{grid-template-columns:repeat(2,1fr)}
  .ko,.ko.genis,.ko.dar,.ko.esit1,.ko.esit2,.ko.esit3,.ko.esit4{grid-column:span 1}
}

@media(max-width:420px){
  .rakam{grid-template-columns:1fr}
  .film-dugme{flex-direction:column}
  .film-dugme a{width:100%}
}

@media(max-width:400px){
  .kap{padding:0 15px}
  .serit{margin-inline:-15px}
  .rakam{grid-template-columns:1fr}
  .mb-sira{gap:var(--ar-3) 8px}
  .mb-kk{width:30px;height:27px}
  .suzgec button,.mb-suzgec button{padding:6px 11px;font-size:12.5px}
}

@media içinde.
   ===================================================================== */


/* --- çok dar ekran --- */


/* ================= YATAY TAŞMA GÜVENLİĞİ ================= */
html,body{max-width:100%;overflow-x:clip}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;
                       animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(max-height:700px){
  .mnu-nav a{font-size:clamp(21px,5.4vw,27px);padding:7px 0}
  .mnu-logo{width:54px;margin-bottom:18px}
  .mnu-alt{margin-top:22px;padding-top:18px;gap:9px}
  #mnu{padding-top:62px}
}

@media(prefers-reduced-motion:reduce){
  .sutun{opacity:1!important;transform:none!important;transition:none!important}
}

@media(prefers-reduced-motion:reduce){
  .aciklama a::after,.kunye a::after,.yol a::after,nav a::after,
  .film-dugme a::before,.cta a::before,.suzgec button::before{transition:none}
  .kart-g img,.proje img,.ko img,.band img,.wa{transition:none}
  .kart:hover .kart-g img,.proje:hover img,.ko button:hover img,.wa:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .kel i{transform:none!important;transition:none!important}
  .derin{transform:none!important}
}

@media(prefers-reduced-motion:reduce){ .malz-k::before{transition:none} }

@media(prefers-reduced-motion:reduce){
  .olcu-c::before{transform:scaleX(1)!important;transition:none}
  .olcu-c::after{opacity:.75!important;transition:none}
}

@media(prefers-reduced-motion:reduce){
  .kap h2{letter-spacing:0}
  .rakam b .birim{opacity:1;transform:none}
  #mnu .mnu-logo,#mnu .mnu-nav a,#mnu .mnu-alt > *{
    opacity:1;transform:none;transition:none}
}

@media(prefers-reduced-motion:reduce){ .imlec-isik{display:none} }

@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none!important}
}

@media(prefers-reduced-motion:reduce){
  .katman,.katman-acik{transform:none!important;box-shadow:none!important;transition:none}
}

@media(hover:none){ .mb-ok{opacity:1} }

@media(prefers-reduced-motion:reduce){ .ton{display:none} }

@media(prefers-reduced-motion:reduce){ .isik::after{display:none} }

@media(prefers-reduced-motion:reduce){ .ray{display:none} }

@media(prefers-reduced-motion:reduce){ .serit-ic{animation:none} }

@media(prefers-reduced-motion:reduce){
  [data-gir],[data-gir].gorundu{opacity:1!important;transform:none!important;
    clip-path:none!important;filter:none!important;transition:none!important}
  .kap h2{letter-spacing:0}
  h2 > span::after{transform:scaleX(1)!important;transition:none!important}
}

/* telefon, e-posta ve kullanıcı adları RTL'de ters dizilmesin */
a[href^="tel:"],a[href^="mailto:"],a[href*="instagram.com"],a[href*="tiktok.com"]{direction:ltr;unicode-bidi:isolate}