@import url('yazitipi.css');

/*
 * Digital Generation Studios — genel site.
 *
 * TASARIM İLKELERİ
 * 1. Fotoğrafa ihtiyaç duymaz. Elimizde stok görsel yok; derinlik gradyan,
 *    ızgara dokusu ve tipografiyle kurulur. Görsel eklendiğinde de bozulmaz.
 * 2. Turuncu TEK vurgudur ve saf kalır (#F5900D). Kahverengiye kaçan tonlar
 *    markayı çamurlaştırıyordu.
 * 3. Üç tema kipi: sistem · açık · koyu. Koyu asıl kimliktir (marka siyah +
 *    turuncu), açık tema onun sadık karşılığıdır.
 */

/* ---------------- palet ---------------- */
:root{
  --turuncu:#F5900D; --turuncuAcik:#ffa733; --turuncuKoyu:#d97c05;
  --turuncuSis:rgba(245,144,13,.13);

  --zemin:#ffffff; --yuzey:#f7f8fa; --yuzey2:#eef0f4;
  --yazi:#14161a; --yaziGuclu:#000000; --soluk:#5b6270;
  --cizgi:#e3e6ec; --cizgiGuclu:#cdd2db;
  --golge:0 1px 2px rgba(16,20,28,.05), 0 8px 24px rgba(16,20,28,.06);
  --golgeGuclu:0 2px 4px rgba(16,20,28,.06), 0 16px 48px rgba(16,20,28,.10);

  --sarmal:1200px;
  --yazitipi:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --yuvarlak:14px; --yuvarlakKucuk:9px;
}
/*
 * Koyu palet İKİ yerde tanımlanır: sistem koyu iken kullanıcı açığı
 * seçmediyse, ve kullanıcı koyuyu seçtiyse. Hiçbir renk yalnızca medya
 * sorgusu içinde tanımlanmaz; aksi halde "açık" seçimi sistem koyudayken
 * çalışmazdı.
 */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]){
    --zemin:#0b0d11; --yuzey:#121519; --yuzey2:#1a1e24;
    --yazi:#e6e9ef; --yaziGuclu:#ffffff; --soluk:#98a1b0;
    --cizgi:#23272f; --cizgiGuclu:#333944;
    --golge:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --golgeGuclu:0 2px 4px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.45);
    --turuncuSis:rgba(245,144,13,.10);
  }
}
:root[data-tema="koyu"]{
  --zemin:#0b0d11; --yuzey:#121519; --yuzey2:#1a1e24;
  --yazi:#e6e9ef; --yaziGuclu:#ffffff; --soluk:#98a1b0;
  --cizgi:#23272f; --cizgiGuclu:#333944;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --golgeGuclu:0 2px 4px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.45);
  --turuncuSis:rgba(245,144,13,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zemin);color:var(--yazi);
  font:16px/1.65 var(--yazitipi);-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04","ss01"}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--turuncu);color:#111}

.sarmal{max-width:var(--sarmal);margin:0 auto;padding:0 28px}
.blok{padding:72px 28px}
.dar{max-width:780px}
.soluk{color:var(--soluk)}
.kucuk{font-size:.86rem}

.atla{position:absolute;left:-9999px}
.atla:focus{left:10px;top:10px;background:var(--turuncu);color:#111;
  padding:11px 18px;border-radius:var(--yuvarlakKucuk);z-index:99;font-weight:600}

/* ---------------- tipografi ---------------- */
h1,h2,h3,h4{color:var(--yaziGuclu);margin:0 0 14px;letter-spacing:-.025em;line-height:1.12;font-weight:800}
h1{font-size:clamp(2.3rem,5.2vw,3.75rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.25rem);margin:56px 0 18px;letter-spacing:-.022em}
h3{font-size:1.2rem;letter-spacing:-.015em;font-weight:700}
h4{font-size:1rem;font-weight:700}

/* Küçük, noktalı bölüm etiketi. */
.etiket{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--soluk);
  background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:999px;padding:6px 14px 6px 11px;margin-bottom:22px}
.etiket::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--turuncu);flex:none}

.ustbaslik{color:var(--soluk);font-size:1.09rem;line-height:1.6;margin:0 0 30px;max-width:60ch}
.metin{max-width:70ch}
.metin p{margin:0 0 18px}
.metin ul,.metin ol{padding-left:22px;margin:0 0 18px}
.metin li{margin:7px 0}
.metin a{color:var(--turuncu);text-underline-offset:3px}
.metin h2{margin-top:44px}
.metin h3{margin-top:32px}
.metin strong{color:var(--yaziGuclu);font-weight:700}
.metin table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.93rem;display:block;overflow-x:auto}
.metin th,.metin td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--cizgi);vertical-align:top}
.metin th{font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--soluk)}
.metin .kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-left:3px solid var(--turuncu);
  border-radius:var(--yuvarlakKucuk);padding:18px 20px;margin:26px 0}
.metin blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--turuncu);
  color:var(--soluk);font-size:1.05rem;font-style:italic}
.metin pre{background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:var(--yuvarlakKucuk);
  padding:18px 20px;overflow-x:auto;font-size:.88rem;line-height:1.55;margin:24px 0}
.metin code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--yuzey2);padding:2px 6px;border-radius:5px}
.metin pre code{background:none;padding:0}

/* ---------------- üst bar ---------------- */
.ustbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--zemin) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--cizgi)}
.ustbar-ic{display:flex;align-items:center;gap:26px;min-height:70px;flex-wrap:wrap;
  max-width:var(--sarmal);margin:0 auto;padding:0 28px}
.marka{text-decoration:none;display:flex;align-items:center;flex:none}
.marka-gorsel{height:29px;width:auto}
.marka-gorsel[data-icin="koyu"]{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]) .marka-gorsel[data-icin="acik"]{display:none}
  :root:not([data-tema="acik"]) .marka-gorsel[data-icin="koyu"]{display:block}
}
:root[data-tema="koyu"] .marka-gorsel[data-icin="acik"]{display:none}
:root[data-tema="koyu"] .marka-gorsel[data-icin="koyu"]{display:block}
:root[data-tema="acik"] .marka-gorsel[data-icin="acik"]{display:block}
:root[data-tema="acik"] .marka-gorsel[data-icin="koyu"]{display:none}

.gezinti{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.gezinti a{text-decoration:none;color:var(--soluk);font-size:.93rem;font-weight:500;
  padding:8px 13px;border-radius:var(--yuvarlakKucuk)}
.gezinti a:hover{color:var(--yaziGuclu);background:var(--yuzey)}
/* Açılır alt menü. Salt CSS: JavaScript gerekmez, klavyeyle de açılır. */
.gezinti-grup{position:relative}
.gezinti-alt{position:absolute;top:100%;left:0;min-width:210px;display:none;
  background:var(--zemin);border:1px solid var(--cizgi);border-radius:var(--yuvarlakKucuk);
  box-shadow:var(--golgeGuclu);padding:6px;z-index:40}
.gezinti-grup:hover .gezinti-alt,
.gezinti-grup:focus-within .gezinti-alt{display:block}
.gezinti-alt a{display:block;white-space:nowrap}

.panel-baglanti{text-decoration:none;font-size:.83rem;font-weight:600;color:#111;
  background:var(--turuncu);padding:8px 14px;border-radius:var(--yuvarlakKucuk);white-space:nowrap}
.panel-baglanti:hover{background:var(--turuncuAcik)}
.diller{display:flex;gap:2px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--yuvarlakKucuk);padding:2px}
.diller a{text-decoration:none;font-size:.78rem;font-weight:600;color:var(--soluk);
  padding:5px 9px;border-radius:6px}
.diller a.etkin{background:var(--turuncu);color:#111}
.tema-secici{display:flex;gap:2px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--yuvarlakKucuk);padding:2px}
.tema-secici button{font:inherit;font-size:.92rem;line-height:1;background:none;border:0;
  cursor:pointer;color:var(--soluk);padding:6px 9px;border-radius:6px}
.tema-secici button:hover{color:var(--yaziGuclu)}
.tema-secici button[aria-pressed="true"]{background:var(--turuncu);color:#111}

/* ---------------- kahraman ---------------- */
.kahraman{position:relative;overflow:hidden;padding:104px 0 96px;
  border-bottom:1px solid var(--cizgi);background:var(--zemin)}
/*
 * Derinlik fotoğrafsız kurulur: turuncu bir ışık huzmesi ve ince ızgara.
 * İkisi de CSS'tir — yüklenecek dosya, bekleyecek istek yoktur.
 */
.kahraman::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 340px at 78% 8%, var(--turuncuSis), transparent 68%),
    radial-gradient(520px 300px at 8% 96%, var(--turuncuSis), transparent 70%)}
.kahraman::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--cizgi) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%)}
.kahraman > *{position:relative;z-index:1}
.kahraman h1{max-width:17ch;margin-bottom:20px}
.kahraman h1 em{font-style:normal;color:var(--turuncu)}
.kahraman-ust{font-size:1.15rem;color:var(--soluk);margin:0 0 34px;max-width:56ch}
.kahraman-eylem{display:flex;gap:12px;flex-wrap:wrap}

/* ---------------- kartlar ---------------- */
.kartlar{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));margin-top:34px}
.kart{display:block;text-decoration:none;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak);padding:26px 26px 28px;position:relative;overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.kart::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--turuncu),var(--turuncuAcik));
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.kart:hover{transform:translateY(-3px);box-shadow:var(--golgeGuclu);border-color:var(--cizgiGuclu)}
.kart:hover::before{transform:scaleX(1)}
.kart h3{margin:12px 0 8px}
.kart p{color:var(--soluk);margin:0 0 14px;font-size:.95rem}

.rozet{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:var(--yuzey2);color:var(--soluk);border:1px solid var(--cizgi)}
.rozet-yayinda{background:var(--turuncu);border-color:var(--turuncu);color:#111}
.rozet-gelistiriliyor{background:var(--turuncuSis);border-color:var(--turuncu);color:var(--turuncu)}

/* ---------------- ürün sayfası ---------------- */
.izyolu{font-size:.88rem;color:var(--soluk);margin-bottom:22px}
.izyolu a{color:var(--soluk);text-decoration:none}
.izyolu a:hover{color:var(--turuncu)}
.ozellik-listesi{padding:0;list-style:none;max-width:62ch;counter-reset:oz;margin:0}
.ozellik-listesi li{padding:15px 0 15px 44px;border-bottom:1px solid var(--cizgi);
  position:relative;counter-increment:oz}
.ozellik-listesi li:first-child{border-top:1px solid var(--cizgi)}
.ozellik-listesi li::before{content:counter(oz,decimal-leading-zero);position:absolute;left:0;top:15px;
  font-size:.78rem;font-weight:700;color:var(--turuncu);letter-spacing:.04em}
.kunye{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;margin:30px 0;font-size:.94rem}
.kunye dt{font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--soluk)}
.kunye dd{margin:0}
.magaza-baglantilari{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------------- blog ---------------- */
.blog-duzen{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;margin-top:36px}
@media (max-width:960px){.blog-duzen{grid-template-columns:1fr}}

.one-cikan{display:block;text-decoration:none;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak);overflow:hidden;margin-bottom:22px;
  transition:transform .16s ease, box-shadow .16s ease}
.one-cikan:hover{transform:translateY(-3px);box-shadow:var(--golgeGuclu)}
.one-cikan .gorsel{aspect-ratio:16/7;background:var(--yuzey2);position:relative;overflow:hidden}
.one-cikan .gorsel img{width:100%;height:100%;object-fit:cover}
.one-cikan .govde{padding:26px 28px 30px}
.one-cikan h2{margin:12px 0 10px;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.one-cikan p{color:var(--soluk);margin:0 0 16px}

/* Kapak yoksa: markanın turuncusundan bir doku. Boş gri kutu bırakmayız. */
.gorsel-yer{position:absolute;inset:0;
  background:
    radial-gradient(420px 200px at 74% 18%, var(--turuncuSis), transparent 70%),
    linear-gradient(135deg, var(--yuzey2), var(--yuzey))}
.gorsel-yer::after{content:"";position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--cizgi) 1px,transparent 1px),
                   linear-gradient(90deg,var(--cizgi) 1px,transparent 1px);
  background-size:38px 38px}

.yazi-kartlari{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.yazi-kart{display:flex;flex-direction:column;text-decoration:none;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease}
.yazi-kart:hover{transform:translateY(-3px);box-shadow:var(--golgeGuclu)}
.yazi-kart .gorsel{aspect-ratio:16/9;background:var(--yuzey2);position:relative;overflow:hidden}
.yazi-kart .gorsel img{width:100%;height:100%;object-fit:cover}
.yazi-kart .govde{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.yazi-kart h3{margin:11px 0 8px;font-size:1.05rem;line-height:1.35}
.yazi-kart p{color:var(--soluk);font-size:.92rem;margin:0}

.yazi-ustveri{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.82rem;color:var(--soluk)}
.yazi-ustveri .kategori{background:var(--turuncuSis);color:var(--turuncu);border:1px solid var(--turuncu);
  padding:3px 10px;border-radius:999px;font-weight:600;font-size:.74rem;
  letter-spacing:.05em;text-transform:uppercase}

.yan{display:flex;flex-direction:column;gap:18px;position:sticky;top:92px}
.yan-kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:20px 22px}
.yan-kutu h3{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--soluk);
  margin:0 0 14px;font-weight:600}
.kategori-listesi{list-style:none;margin:0;padding:0}
.kategori-listesi li{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--cizgi);font-size:.93rem}
.kategori-listesi li:last-child{border-bottom:0}
.kategori-listesi a{text-decoration:none;color:var(--yazi)}
.kategori-listesi a:hover{color:var(--turuncu)}
.kategori-listesi li.etkin a{color:var(--turuncu);font-weight:600}
.kategori-listesi li.etkin .adet{background:var(--turuncu);color:#111}
.kategori-listesi .adet{font-size:.78rem;color:var(--soluk);background:var(--yuzey2);
  border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}

/* --- yazı sayfası --- */
.yazi-bas{max-width:760px;margin:0 auto;text-align:center}
.yazi-bas h1{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:16px 0 18px}
.yazi-bas .yazi-ustveri{justify-content:center}
.yazi-kapak{max-width:1000px;margin:40px auto 44px;border-radius:var(--yuvarlak);overflow:hidden;
  border:1px solid var(--cizgi);aspect-ratio:16/8;position:relative;background:var(--yuzey2)}
.yazi-kapak img{width:100%;height:100%;object-fit:cover}
.yazi-govde{max-width:720px;margin:0 auto;font-size:1.04rem;line-height:1.75}
.ilgili{border-top:1px solid var(--cizgi);margin-top:72px;padding-top:48px}

/* ---------------- düğmeler ve form ---------------- */
.dugme{display:inline-flex;align-items:center;gap:9px;background:var(--turuncu);color:#111;
  text-decoration:none;font-weight:650;font-size:.96rem;padding:13px 24px;
  border-radius:var(--yuvarlakKucuk);border:1px solid var(--turuncu);cursor:pointer;
  transition:background .15s, transform .1s}
.dugme:hover{background:var(--turuncuAcik);border-color:var(--turuncuAcik)}
.dugme:active{transform:translateY(1px)}
.dugme.ikincil{background:var(--yuzey);color:var(--yazi);border-color:var(--cizgiGuclu)}
.dugme.ikincil:hover{background:var(--yuzey2);border-color:var(--soluk)}

.form{display:grid;gap:18px;max-width:600px;margin-top:32px}
.form label{display:grid;gap:7px;font-size:.88rem;font-weight:600;color:var(--yazi)}
.form input,.form textarea,.form select{font:16px/1.5 var(--yazitipi);color:var(--yazi);
  background:var(--zemin);border:1px solid var(--cizgiGuclu);border-radius:var(--yuvarlakKucuk);
  padding:12px 14px;width:100%;font-weight:400}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--turuncu);
  box-shadow:0 0 0 3px var(--turuncuSis)}
.balkupu{position:absolute;left:-9999px}

.bildirim{padding:14px 18px;margin:22px 0;font-size:.94rem;border-radius:var(--yuvarlakKucuk);
  background:var(--yuzey);border:1px solid var(--cizgi);border-left:3px solid var(--turuncu)}
.bildirim.hatali{border-left-color:#e5484d}
.bildirim ul{margin:0;padding-left:20px}

/* ---------------- alt bilgi ---------------- */
.altbilgi{border-top:1px solid var(--cizgi);margin-top:96px;padding:52px 0;background:var(--yuzey)}
.altbilgi-ic{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  max-width:var(--sarmal);margin:0 auto;padding:0 28px}
.altbilgi-ic strong{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.altbilgi-menu{display:flex;gap:22px;flex-wrap:wrap}
.altbilgi-menu a{color:var(--soluk);text-decoration:none;font-size:.91rem}
.altbilgi-menu a:hover{color:var(--turuncu)}

@media (max-width:760px){
  .kahraman{padding:64px 0 60px}
  .blok{padding:52px 22px}
  .sarmal{padding:0 22px}
  .ustbar-ic{gap:12px;padding-top:12px;padding-bottom:12px;min-height:0}
  .gezinti{margin-left:0;width:100%;order:5;gap:2px}
  .diller{margin-left:auto}
  .yan{position:static}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}


/* ============================================================
   BLOKLAR
   Blok tabanlı sayfa kurgusunun stilleri. Her blok kendi
   bölümünü çizer; boşluklar `.blok` üzerinden ortaktır.
   ============================================================ */

.kahraman-orta{text-align:center}
.kahraman-orta h1,.kahraman-orta .kahraman-ust{margin-left:auto;margin-right:auto}
.kahraman-orta .kahraman-eylem{justify-content:center}
.kahraman-gorsel{margin-top:44px;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  overflow:hidden;box-shadow:var(--golgeGuclu);background:var(--yuzey)}

.ozellik-izgara{display:grid;gap:16px;margin-top:28px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (min-width:920px){
  .ozellik-izgara{grid-template-columns:repeat(var(--sutun,3),1fr)}
}
.ozellik-kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  padding:24px 24px 26px;position:relative}
.ozellik-kart::before{content:"";position:absolute;left:24px;top:0;width:34px;height:3px;background:var(--turuncu)}
.ozellik-kart h3{margin:6px 0 8px;font-size:1.05rem}
.ozellik-kart p{color:var(--soluk);margin:0;font-size:.95rem}

.sayi-seridi{display:grid;gap:0;margin-top:28px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);overflow:hidden;background:var(--yuzey)}
.sayi{padding:28px 24px;border-right:1px solid var(--cizgi)}
.sayi:last-child{border-right:0}
.sayi b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;color:var(--turuncu);line-height:1.1}
.sayi span{color:var(--soluk);font-size:.9rem}

.ekran-seridi{display:flex;gap:18px;overflow-x:auto;padding:28px 0 12px;scroll-snap-type:x mandatory}
.ekran{flex:0 0 auto;width:min(280px,72vw);margin:0;scroll-snap-align:start}
.ekran img{border:1px solid var(--cizgi);border-radius:var(--yuvarlak);background:var(--yuzey);width:100%}
.ekran figcaption{color:var(--soluk);font-size:.86rem;margin-top:10px}

.buyuk-alinti{margin:0;max-width:780px;border-left:3px solid var(--turuncu);padding:6px 0 6px 26px}
.buyuk-alinti blockquote{margin:0;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.45;
  font-weight:600;letter-spacing:-.015em;color:var(--yaziGuclu)}
.buyuk-alinti figcaption{color:var(--soluk);margin-top:14px;font-size:.94rem}

.sss-oge{border-bottom:1px solid var(--cizgi)}
.sss-oge summary{cursor:pointer;padding:17px 0;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.sss-oge summary::-webkit-details-marker{display:none}
.sss-oge summary::after{content:"+";color:var(--turuncu);font-weight:700;font-size:1.2rem;flex:none}
.sss-oge[open] summary::after{content:"–"}
.sss-cevap{color:var(--soluk);padding:0 0 18px;max-width:68ch}

.cagri{background:var(--turuncu);color:#111;margin-top:24px}
.cagri.cagri-sade{background:var(--yuzey);color:var(--yazi);
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.cagri-ic{display:flex;gap:28px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding-top:44px;padding-bottom:44px}
.cagri h2{margin:0 0 6px;color:inherit}
.cagri p{margin:0;opacity:.85}
.cagri.cagri-sade p{color:var(--soluk);opacity:1}
.dugme-ters{background:#111;color:#fff;border-color:#111}
.dugme-ters:hover{background:#000;border-color:#000}

/* Vitrin: ilk kart geniş, ötekiler ızgarada. */
.vitrin{display:grid;gap:18px;margin-top:32px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.vitrin-kart{display:flex;flex-direction:column;text-decoration:none;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease}
.vitrin-kart:hover{transform:translateY(-3px);box-shadow:var(--golgeGuclu)}
.vitrin-kart .gorsel{aspect-ratio:16/9;background:var(--yuzey2);position:relative;overflow:hidden}
.vitrin-kart .gorsel img{width:100%;height:100%;object-fit:cover}
.vitrin-kart .govde{padding:22px 24px 26px}
.vitrin-kart h3{margin:12px 0 8px}
.vitrin-kart p{color:var(--soluk);margin:0 0 12px;font-size:.95rem}
@media (min-width:920px){
  .vitrin{grid-template-columns:repeat(3,1fr)}
  .vitrin-kart.genis{grid-column:span 2}
  .vitrin-kart.genis .gorsel{aspect-ratio:16/7}
  .vitrin-kart.genis h3{font-size:1.5rem}
}