/* ============================================================
   BaskıGATE — tanıtım sitesi
   ------------------------------------------------------------
   Uygulamanın kendi dili (bg.css) belge dilidir: sistem fontu,
   keskin köşe, veri tablosu. Burası satış yüzü; aynı lacivert
   omurgayı kullanır ama nefes alır. Kırmızı yine yalnızca uyarı.
   ============================================================ */

:root{
  --lacivert:      #1b2a5b;
  --lacivert-koyu: #131e42;
  --lacivert-acik: #2c3f7c;
  --lacivert-sis:  #eef1f8;
  /* Marka kırmızısı — logodan gelir. Beyaz üzerinde 3.9:1 kontrast verir:
     grafik öğe ve BÜYÜK yazı için yeterli, küçük metin için değil. Bu yüzden
     küçük yazıya koyulaştırılmış türevi (--kirmizi-metin, 5.4:1) uygulanır. */
  --kirmizi-marka: #ee4023;
  --kirmizi-metin: #c92d14;
  --kirmizi-sis:   #fdeeea;
  --kirmizi-koyu:  #8f1f0d;
  --yesil:         #1c6b47;
  --kirmizi:       #c0272d;   /* yalnızca uyarı */

  /* Bölüm vurguları. Her bant TEK renk alır; sayfa boyunca sıcaktan soğuğa
     ilerler. Marka rengi lacivert; bunlar onun etrafında dönen tonlar. */
  --mor:      #4a2d6b;  --mor-sis:      #f0ebf6;
  --deniz:    #14554f;  --deniz-sis:    #e6f1ef;
  --gece:     #123a5c;  --gece-sis:     #e6eef5;
  --tunc:     #8a5a2b;  --tunc-sis:     #f5ece2;   /* beyazda 5.0:1 */

  /* CMYK: yalnızca baskı diline ait yerlerde — renk barı, mürekkep noktası */
  --c:#00AEEF; --m:#EC008C; --y:#FFF200; --k:#231F20;

  --kagit:   #ffffff;
  --kagit-2: #f5f6fa;
  --kagit-3: #eaedf5;
  --cizgi:   #dde1ec;
  --cizgi-2: #eceff6;
  --metin:   #131728;
  --metin-2: #454b63;
  --metin-3: #757b93;

  --f-bas:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-gov:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r:4px;
  --a1:4px; --a2:8px; --a3:14px; --a4:20px; --a5:32px; --a6:48px; --a7:80px; --a8:120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{
  margin:0;background:var(--kagit);color:var(--metin);
  font-family:var(--f-gov);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--lacivert)}
:focus-visible{outline:2px solid var(--kirmizi-marka);outline-offset:2px;border-radius:2px}

.kus{max-width:1120px;margin:0 auto;padding:0 var(--a5)}
.kus-dar{max-width:760px;margin:0 auto;padding:0 var(--a5)}
@media(max-width:640px){.kus,.kus-dar{padding:0 var(--a4)}}

section{padding:var(--a8) 0}
section.sik{padding:var(--a7) 0}
section.gri{background:var(--kagit-2);border-top:1px solid var(--cizgi-2);border-bottom:1px solid var(--cizgi-2)}
section.koyu{background:var(--lacivert);color:#fff}

/* ============ TİPOGRAFİ ============ */
h1,h2,h3,h4{font-family:var(--f-bas);font-weight:700;letter-spacing:-.025em;
  margin:0;text-wrap:balance;line-height:1.12}
h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.22rem;letter-spacing:-.012em;line-height:1.3}
p{margin:0}

.eyebrow{font-family:var(--f-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--kirmizi-metin);
  display:block;margin-bottom:var(--a3)}
section.koyu .eyebrow{color:#ff9b85}

.spot{font-size:1.18rem;color:var(--metin-2);line-height:1.7;max-width:38em}
section.koyu .spot{color:rgba(255,255,255,.78)}

.bolum-bas{max-width:44em;margin-bottom:var(--a7)}
.bolum-bas h2+.spot{margin-top:var(--a4)}

/* ============ DÜĞME ============ */
.btn{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-gov);font-size:1rem;font-weight:600;
  padding:14px 26px;border-radius:var(--r);border:1.5px solid var(--lacivert);
  background:var(--lacivert);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--lacivert-acik);border-color:var(--lacivert-acik)}
.btn:active{transform:translateY(1px)}
.btn-2{background:transparent;color:var(--lacivert)}
.btn-2:hover{background:var(--lacivert-sis)}
section.koyu .btn{background:#fff;border-color:#fff;color:var(--lacivert)}
section.koyu .btn:hover{background:var(--lacivert-sis);border-color:var(--lacivert-sis)}
section.koyu .btn-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
section.koyu .btn-2:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-kucuk{padding:9px 16px;font-size:.92rem}
/* Düğme içindeki ikonun ölçüsü hiçbir yerde tanımlı değildi. Yalnızca
   viewBox'ı olan bir SVG'yi tarayıcı 300×150 px kabul eder: ikon düğmeyi
   doldurunca yazı alt satıra düşüyordu. */
.btn .im{width:18px;height:18px;flex:none}
.btn-kucuk .im{width:15px;height:15px}
.btn-grup{display:flex;gap:var(--a3);flex-wrap:wrap;align-items:center}

/* ============ ÜST BAR ============ */
.ust{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(170%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.ust[data-kaydi="1"]{border-bottom-color:var(--cizgi-2);
  box-shadow:0 8px 24px -18px rgba(19,23,40,.45)}
.ust-serit{display:flex;height:3px}
.ust-serit i{flex:1}

/* Yardımcı şerit: giriş ve başvuru gibi "her sayfada lazım ama menünün
   konusu değil" bağlantılar burada. Ana menü altı maddeyle kalabalıklaşınca
   ziyaretçi hangi sayfaya gideceğini değil, listeyi okumaya başlıyordu. */
.ust-yardimci{background:var(--lacivert);color:rgba(255,255,255,.72)}
/* Dikey payı düğme belirliyor: min-height düğmeden yalnızca birkaç piksel
   büyük kalınca düğme şeridin içine sıkışmış görünüyordu. */
.uy-ic{max-width:1120px;margin:0 auto;padding:6px var(--a5);
  display:flex;align-items:center;gap:var(--a4);min-height:44px}
.uy-slogan{margin-right:auto;font-size:.82rem;letter-spacing:.01em}
.ust-yardimci a{color:rgba(255,255,255,.8);text-decoration:none;font-size:.84rem;
  font-weight:500;white-space:nowrap}
.ust-yardimci a:hover{color:#fff;text-decoration:underline}
.ust-yardimci a.btn{background:#fff;border-color:#fff;color:var(--lacivert);
  padding:5px 13px;font-size:.82rem;text-decoration:none}
.ust-yardimci a.btn:hover{background:var(--lacivert-sis);border-color:var(--lacivert-sis);
  text-decoration:none}
.uy-ayrac{width:1px;height:14px;background:rgba(255,255,255,.28)}

/* Dil değiştirici: iki kısa kod yan yana. Bayrak KULLANILMIYOR — bayrak
   ülkeyi gösterir, dili değil; İngilizce okuyan bir Alman müşteriye
   İngiliz bayrağı göstermek yanlış soruyu sorar. */
.uy-dil{display:flex;align-items:center;gap:2px;font-size:.78rem;font-weight:600;
  letter-spacing:.04em}
.ust-yardimci .uy-dil a{padding:3px 6px;border-radius:4px;font-size:.78rem;
  font-weight:600;color:rgba(255,255,255,.62)}
.ust-yardimci .uy-dil a:hover{color:#fff;background:rgba(255,255,255,.12);
  text-decoration:none}
.uy-dil-etkin{padding:3px 6px;border-radius:4px;color:#fff;
  background:rgba(255,255,255,.16)}

/* Yalnızca hamburger menüde görünen bağlantılar: dar ekranda yardımcı
   şeritten düşen İletişim ve Giriş kaybolmasın. */
.yalniz-mobil{display:none}
.ust-ic{max-width:1120px;margin:0 auto;padding:var(--a3) var(--a5);
  display:flex;align-items:center;gap:var(--a5)}

.marka{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-bas);font-weight:700;font-size:1.2rem;
  letter-spacing:-.03em;color:var(--lacivert);text-decoration:none;white-space:nowrap}
.marka i{font-style:normal;opacity:.5}
.marka .im{width:26px;height:26px;flex:none}

.ust nav{margin-left:auto;display:flex;align-items:center;gap:var(--a1)}
.ust nav a{position:relative;color:var(--metin-2);text-decoration:none;
  font-size:.97rem;font-weight:500;padding:9px 14px;border-radius:var(--r);
  transition:color .15s,background .15s}
.ust nav a:not(.btn):hover{color:var(--lacivert);background:var(--lacivert-sis)}
.ust nav a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;
  height:2px;background:var(--kirmizi-marka);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.ust nav a[aria-current="page"]{color:var(--lacivert);font-weight:600}
.ust nav a[aria-current="page"]::after{transform:scaleX(1)}
.ust nav .ayrac{width:1px;height:22px;background:var(--cizgi);margin:0 var(--a3)}
.ust nav a.btn{color:#fff;margin-left:var(--a2)}
.ust-ac{display:none;margin-left:auto;background:none;border:1px solid var(--cizgi);
  border-radius:var(--r);padding:8px 12px;cursor:pointer;color:var(--metin)}
@media(max-width:880px){
  .ust nav{position:absolute;top:100%;left:0;right:0;background:var(--kagit);
    border-bottom:1px solid var(--cizgi);flex-direction:column;align-items:stretch;
    gap:0;padding:var(--a3) var(--a5) var(--a4);margin:0;
    box-shadow:0 18px 30px -22px rgba(19,23,40,.5)}
  .ust nav[hidden]{display:none}
  .ust nav a{padding:13px 0;border-bottom:1px solid var(--cizgi-2);border-radius:0}
  .ust nav a::after{display:none}
  .ust nav .ayrac{display:none}
  .ust nav a.btn{margin:var(--a3) 0 0;justify-content:center;border-bottom:none}
  .ust nav .yalniz-mobil{display:block}
  .ust-ac{display:block}

  /* Dar ekranda yardımcı şeritte yalnızca başvuru düğmesi kalıyor;
     slogan ve diğer bağlantılar hamburger menüye taşınıyor. */
  .uy-slogan,
  .ust-yardimci .uy-metin,
  .uy-ayrac{display:none}
  /* Dil değiştirici dar ekranda da kalır: İngilizce okuyan ziyaretçi
     telefonda dilini hiç değiştiremezse iki dilli olmanın anlamı kalmaz. */
  .uy-ic{justify-content:flex-end;gap:var(--a3);min-height:44px}
}

/* ============ HERO ============ */
/* Açık zemin. Arkada CMYK mürekkepler suya bırakılmış gibi ağır ağır
   dolaşıyor: fark edilmesi gereken bir şey değil, sayfanın nefes alması.
   Baskıda dört renk üst üste binerek diğer renkleri yapar; burada da
   karışım multiply ile oluyor — dijital bir efekt değil, mürekkep mantığı. */
.hero{position:relative;background:#fdfdff;padding:var(--a8) 0;overflow:hidden;isolation:isolate}

.mürekkep{position:absolute;inset:-25%;z-index:0;pointer-events:none;
  filter:blur(96px) saturate(110%);opacity:.28;mix-blend-mode:multiply}
.mürekkep i{position:absolute;display:block;border-radius:50%;
  will-change:transform;animation-timing-function:cubic-bezier(.42,0,.58,1);
  animation-iteration-count:infinite;animation-direction:alternate}
.mürekkep .c{width:44%;height:52%;left:30%;top:-4%;
  background:radial-gradient(circle at 45% 45%,rgba(0,174,239,.72) 0%,rgba(0,174,239,.26) 40%,transparent 68%);
  animation-name:akis-1;animation-duration:64s}
.mürekkep .m{width:38%;height:46%;left:58%;top:16%;
  background:radial-gradient(circle at 55% 45%,rgba(236,0,140,.6) 0%,rgba(236,0,140,.2) 42%,transparent 70%);
  animation-name:akis-2;animation-duration:82s}
.mürekkep .y{width:46%;height:44%;left:40%;top:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,242,0,.68) 0%,rgba(255,242,0,.24) 44%,transparent 72%);
  animation-name:akis-3;animation-duration:72s}
.mürekkep .k{width:30%;height:34%;left:16%;top:52%;
  background:radial-gradient(circle at 45% 50%,rgba(27,42,91,.42) 0%,rgba(27,42,91,.14) 44%,transparent 72%);
  animation-name:akis-4;animation-duration:94s}

@keyframes akis-1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6%,7%,0) scale(1.14)}
  100%{transform:translate3d(-4%,12%,0) scale(.94)}
}
@keyframes akis-2{
  0%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-9%,10%,0) scale(.9)}
  100%{transform:translate3d(4%,-6%,0) scale(1.18)}
}
@keyframes akis-3{
  0%{transform:translate3d(0,0,0) scale(.96)}
  50%{transform:translate3d(8%,-9%,0) scale(1.2)}
  100%{transform:translate3d(-7%,-3%,0) scale(1.02)}
}
@keyframes akis-4{
  0%{transform:translate3d(0,0,0) scale(1.1)}
  50%{transform:translate3d(-6%,-8%,0) scale(.92)}
  100%{transform:translate3d(7%,5%,0) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){
  .mürekkep i{animation:none}
  .mürekkep{opacity:.3}
}

/* Metnin durduğu sol taraf beyaza yaklaşsın: okunurluk mürekkepten önce gelir. */
.hero .perde{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(253,253,255,.94) 0%,rgba(253,253,255,.7) 32%,rgba(253,253,255,.16) 60%,transparent 80%)}

/* mürekkebin üstüne çok soluk register deseni: kâğıt hissi */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/desen-register.svg") repeat;opacity:.55;
  -webkit-mask-image:radial-gradient(80% 75% at 50% 45%,#000,transparent 78%);
  mask-image:radial-gradient(80% 75% at 50% 45%,#000,transparent 78%)}

.hero .kus{position:relative;z-index:1}
.hero-izgara{display:grid;grid-template-columns:1fr;gap:var(--a7);align-items:center}
@media(min-width:980px){.hero-izgara{grid-template-columns:1.04fr .96fr;gap:var(--a8)}}
.hero h1{margin-bottom:var(--a4);font-size:clamp(2.5rem,6vw,4.4rem)}
.hero h1 em{font-style:normal;color:var(--kirmizi-marka)}
.hero .spot{margin-bottom:var(--a5);font-size:1.2rem}
.hero-alt{margin-top:var(--a4);font-size:.92rem;color:var(--metin-3);
  display:flex;align-items:center;gap:9px}
.hero-alt .im{width:16px;height:16px;flex:none;color:var(--yesil)}

/* ---- onay kaydı kartı ---- */
.kayit-kart{background:#fff;color:var(--metin);border-radius:8px;overflow:hidden;
  border:1px solid var(--cizgi);
  box-shadow:0 28px 60px -32px rgba(19,23,40,.4),0 2px 5px rgba(19,23,40,.06)}
.kayit-bas{display:flex;align-items:center;gap:var(--a3);
  padding:13px var(--a4);background:var(--kagit-2);border-bottom:1px solid var(--cizgi);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--metin-3)}
.kayit-bas .no{margin-left:auto;color:var(--metin-2)}
.kayit-govde{padding:var(--a5) var(--a4) var(--a4);position:relative}

.damga{display:inline-flex;flex-direction:column;gap:2px;
  border:2px solid var(--yesil);color:var(--yesil);border-radius:5px;
  padding:9px 16px;transform:rotate(-3deg);margin-bottom:var(--a4)}
.damga b{font-family:var(--f-bas);font-size:1.15rem;letter-spacing:.02em;
  text-transform:uppercase;line-height:1}
.damga span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em}

.kayit-kart table{width:100%;border-collapse:collapse;font-size:.92rem}
.kayit-kart td{padding:8px 0;border-bottom:1px solid var(--cizgi-2)}
.kayit-kart tr:last-child td{border-bottom:none}
.kayit-kart td:first-child{color:var(--metin-3);font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  white-space:nowrap;padding-right:var(--a4)}
.kayit-kart td:last-child{text-align:right;font-weight:600}

.zincir{margin-top:var(--a4);border-top:1px dashed var(--cizgi);padding-top:var(--a3)}
.zincir-bas{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--metin-3);margin-bottom:8px}
.halkalar{display:flex;gap:4px;align-items:center}
.halkalar i{flex:1;height:7px;border-radius:2px;background:var(--lacivert);opacity:.22}
.halkalar i:nth-child(-n+5){opacity:.85}
.zincir-alt{display:flex;gap:var(--a3);align-items:baseline;margin-top:8px;
  font-size:.7rem;color:var(--metin-3)}
.zincir-alt .mono{font-family:var(--f-mono)}
.zincir-alt .saglam{margin-left:auto;color:var(--yesil);font-weight:600}

.kayit-alt{padding:12px var(--a4);background:var(--kirmizi-sis);color:var(--kirmizi-koyu);
  font-size:.84rem;line-height:1.5;border-top:1px solid #eddfd2}

/* alıntı: sorunu müşterinin ağzından kur */
.alinti{border-left:3px solid var(--kirmizi-marka);padding:var(--a2) 0 var(--a2) var(--a4);
  font-size:1.05rem;color:var(--metin-2);margin-bottom:var(--a5)}
.alinti cite{display:block;margin-top:8px;font-style:normal;font-size:.88rem;color:var(--metin-3)}

/* ============ ONAY KARTI (ürün görseli yerine) ============ */
.onay-kart{border:1px solid var(--cizgi);border-radius:6px;overflow:hidden;
  background:var(--kagit);box-shadow:0 1px 2px rgba(19,23,40,.05),0 18px 44px -20px rgba(19,23,40,.28)}
.onay-kart .bas{background:var(--lacivert);color:#fff;padding:13px var(--a4);
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;display:flex;align-items:center;gap:var(--a2)}
.onay-kart .bas .yan{margin-left:auto;opacity:.6;letter-spacing:.06em}
.onay-kart .govde{padding:var(--a4)}
.onay-kart .serit{background:var(--kirmizi);color:#fff;border-radius:3px;
  padding:11px var(--a3);font-size:.86rem;line-height:1.45;margin-bottom:var(--a4)}
.onay-kart .serit b{display:block;font-family:var(--f-mono);letter-spacing:.12em;
  text-transform:uppercase;font-size:.66rem;margin-bottom:3px}
.onay-kart table{width:100%;border-collapse:collapse;font-size:.92rem}
.onay-kart td{padding:9px 0;border-bottom:1px solid var(--cizgi-2)}
.onay-kart tr:last-child td{border-bottom:none}
.onay-kart td:first-child{color:var(--metin-3);font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-right:var(--a4)}
.onay-kart td:last-child{text-align:right;font-weight:600}
.onay-kart .alt{padding:var(--a3) var(--a4);background:var(--kagit-2);
  border-top:1px solid var(--cizgi-2);display:flex;gap:var(--a2)}
.onay-kart .sahte{flex:1;text-align:center;padding:11px;border-radius:3px;
  font-size:.92rem;font-weight:600}
.onay-kart .evet{background:var(--yesil);color:#fff}
.onay-kart .hayir{background:var(--kagit);border:1px solid var(--cizgi);color:var(--metin-2)}
.muhur{display:flex;align-items:center;gap:8px;margin-top:var(--a3);
  font-family:var(--f-mono);font-size:.7rem;color:var(--metin-3)}

/* ============ IZGARALAR ============ */
.uc{display:grid;grid-template-columns:1fr;gap:var(--a6)}
@media(min-width:760px){.uc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.uc{grid-template-columns:repeat(3,1fr)}}
.iki{display:grid;grid-template-columns:1fr;gap:var(--a6)}
@media(min-width:820px){.iki{grid-template-columns:repeat(2,1fr);gap:var(--a7)}}

.oz h3{margin-bottom:var(--a2)}
.oz p{color:var(--metin-2);font-size:.98rem}
.oz .im{width:34px;height:34px;color:var(--lacivert);margin-bottom:var(--a3)}
section.koyu .oz p{color:rgba(255,255,255,.72)}
section.koyu .oz .im{color:#d9a87e}

/* sorun listesi */
.sorunlar{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:820px){.sorunlar{grid-template-columns:1fr 1fr;column-gap:var(--a7)}}
.sorun{display:flex;gap:var(--a3);padding:var(--a4) 0;border-bottom:1px solid var(--cizgi-2)}
.sorun .im{width:22px;height:22px;color:var(--kirmizi);flex:none;margin-top:3px}
.sorun b{display:block;margin-bottom:3px;font-size:1.02rem}
.sorun span{color:var(--metin-2);font-size:.96rem}

/* adımlar: gerçek bir sıra, numara bilgi taşıyor */
.adimlar{counter-reset:ad;display:grid;grid-template-columns:1fr;gap:var(--a6)}
@media(min-width:900px){.adimlar{grid-template-columns:repeat(4,1fr);gap:var(--a5)}}
.adim{position:relative;padding-top:var(--a6)}
.adim::before{counter-increment:ad;content:counter(ad,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:var(--f-mono);font-size:.86rem;
  font-weight:500;color:var(--kirmizi-metin);letter-spacing:.08em}
.adim::after{content:"";position:absolute;top:9px;left:34px;right:0;height:1px;
  background:var(--cizgi)}
@media(max-width:899px){.adim::after{display:none}}
.adim h3{margin-bottom:var(--a2)}
.adim p{color:var(--metin-2);font-size:.96rem}

/* mühür anlatımı */
.muhur-satir{display:grid;grid-template-columns:1fr;gap:var(--a4);margin-top:var(--a6)}
@media(min-width:760px){.muhur-satir{grid-template-columns:repeat(3,1fr)}}
.muhur-kutu{border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:var(--a4)}
.muhur-kutu b{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px}
.muhur-kutu span{color:rgba(255,255,255,.88);font-size:.96rem;line-height:1.6}

/* ============ SSS ============ */
.sss details{border-bottom:1px solid var(--cizgi-2);padding:var(--a4) 0}
.sss summary{cursor:pointer;font-weight:600;list-style:none;display:flex;
  align-items:baseline;gap:var(--a3);font-size:1.08rem;font-family:var(--f-bas);
  letter-spacing:-.01em}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";margin-left:auto;color:var(--metin-3);
  font-weight:400;font-size:1.4rem;line-height:1}
.sss details[open] summary::after{content:"\2212"}
.sss p{color:var(--metin-2);margin-top:var(--a3);max-width:60em}

/* ============ FORM ============ */
.form-izgara{display:grid;grid-template-columns:1fr;gap:var(--a4)}
@media(min-width:640px){.form-izgara{grid-template-columns:1fr 1fr}}
.alan{display:flex;flex-direction:column;gap:6px}
.alan.tam{grid-column:1/-1}
.alan label{font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--metin-3)}
.alan input,.alan textarea,.alan select{
  font-family:var(--f-gov);font-size:1rem;padding:12px 14px;
  border:1.5px solid var(--cizgi);border-radius:var(--r);
  background:var(--kagit);color:var(--metin);width:100%}
.alan textarea{min-height:150px;resize:vertical;line-height:1.6}
.alan input:focus,.alan textarea:focus,.alan select:focus{
  outline:none;border-color:var(--lacivert);box-shadow:0 0 0 3px var(--lacivert-sis)}
.alan .ipucu{font-size:.85rem;color:var(--metin-3)}
.onay-kutu{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--metin-2)}
.onay-kutu input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--lacivert)}
.tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.hata-kutu{background:#fdeceb;border:1px solid var(--kirmizi);color:#8f1c21;
  border-radius:var(--r);padding:var(--a3) var(--a4);margin-bottom:var(--a5);font-size:.95rem}
.hata-kutu ul{margin:6px 0 0;padding-left:20px}
.bilgi-kutu{background:var(--kirmizi-sis);border-left:3px solid var(--kirmizi-marka);
  padding:var(--a3) var(--a4);margin-bottom:var(--a5);font-size:.93rem;color:var(--kirmizi-koyu)}

/* ============ YASAL METİN ============ */
.yasal{max-width:44em}
.yasal h2{font-size:1.35rem;margin:var(--a6) 0 var(--a3)}
.yasal h2:first-of-type{margin-top:var(--a5)}
.yasal p,.yasal li{color:var(--metin-2);font-size:1rem;line-height:1.75}
.yasal p{margin-bottom:var(--a3)}
.yasal ul{margin:0 0 var(--a3);padding-left:22px}
.yasal li{margin-bottom:6px}
.yasal .tarih{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--metin-3)}
.bosluk{background:var(--kirmizi-sis);color:var(--kirmizi-koyu);padding:1px 6px;border-radius:3px;
  font-family:var(--f-mono);font-size:.85em;white-space:nowrap}

/* ============ ALT BİLGİ ============ */
.alt{background:var(--lacivert-koyu);color:rgba(255,255,255,.72);padding:var(--a7) 0 var(--a5)}
.alt-izgara{display:grid;grid-template-columns:1fr;gap:var(--a6)}
@media(min-width:760px){.alt-izgara{grid-template-columns:1.5fr 1fr 1fr}}
.alt .marka{color:#fff;font-size:1.3rem}
.alt h4{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:var(--a3);font-weight:500}
.alt a{color:rgba(255,255,255,.72);text-decoration:none;display:block;
  padding:5px 0;font-size:.95rem}
.alt a:hover{color:#fff}

/* Alt bilgideki dil seçimi. Buradaki bağlantılar yan yana duruyor;
   .alt a kuralı hepsini blok yaptığı için ayrıca satır içine alınıyor. */
.alt-dil{margin-top:var(--a4);font-size:.9rem;display:flex;gap:var(--a3);
  align-items:center;flex-wrap:wrap}
.alt-dil a{display:inline}
.alt-dil span{color:#fff;font-weight:600}
.alt .kunye{font-size:.86rem;line-height:1.7;color:rgba(255,255,255,.55)}
.alt-son{margin-top:var(--a6);padding-top:var(--a4);border-top:1px solid rgba(255,255,255,.12);
  display:flex;gap:var(--a4);flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.45)}
.alt-son .sag{margin-left:auto}

/* ikonlar */
.im{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ============ BASKI DİLİ: RENK BARI ============ */
.renk-bari{display:flex;height:6px;width:100%}
.renk-bari i{flex:1;display:block}
.renk-bari .c{background:var(--c)} .renk-bari .m{background:var(--m)}
.renk-bari .y{background:var(--y)} .renk-bari .k{background:var(--k)}
.renk-bari.ince{height:4px}

/* ============ KAYAN ŞERİT ============ */
/* İçerik gerçek: matbaanın onay formundaki alanlar. Süs değil, sözlük. */
.serit-kus{overflow:hidden;border-top:1px solid var(--cizgi-2);
  border-bottom:1px solid var(--cizgi-2);background:var(--kagit);padding:var(--a3) 0}
section.koyu .serit-kus{background:transparent;border-color:rgba(255,255,255,.14)}
.serit{display:flex;width:max-content;animation:kay 46s linear infinite}
.serit:hover{animation-play-state:paused}
.serit ul{display:flex;list-style:none;margin:0;padding:0;align-items:center}
.serit li{display:flex;align-items:center;gap:var(--a4);padding:0 var(--a4);
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--metin-3);white-space:nowrap}
.serit li::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--kirmizi-marka);opacity:.6;flex:none}
section.koyu .serit li{color:rgba(255,255,255,.5)}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .serit{animation:none;width:auto;overflow-x:auto}
}

/* ============ GÖRSEL BLOKLARI ============ */
.gorsel-cerceve{position:relative;border:1px solid var(--cizgi);border-radius:6px;
  background:var(--kagit);padding:var(--a5);overflow:hidden}
.gorsel-cerceve::before{content:"";position:absolute;inset:0;
  background:url("../img/desen-register.svg") repeat;opacity:.9;pointer-events:none}
.gorsel-cerceve img,.gorsel-cerceve svg{position:relative;display:block;width:100%;height:auto}
.gorsel-alt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--metin-3);margin-top:var(--a3);text-align:center}

/* hero arka planı: çok soluk register deseni */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("../img/desen-register.svg") repeat;
  -webkit-mask-image:radial-gradient(70% 60% at 72% 40%,#000,transparent 72%);
  mask-image:radial-gradient(70% 60% at 72% 40%,#000,transparent 72%)}

/* ============ RENKLİ BÖLÜM BANTLARI ============ */
section.mor{background:var(--mor-sis);border-top:1px solid #e0d6ec;border-bottom:1px solid #e0d6ec}
section.mor .eyebrow{color:var(--mor)}
section.deniz{background:var(--deniz-sis);border-top:1px solid #cfe3df;border-bottom:1px solid #cfe3df}
section.deniz .eyebrow{color:var(--deniz)}
section.deniz .oz .im,section.mor .oz .im{color:currentColor}
section.deniz .oz{color:var(--deniz)} section.mor .oz{color:var(--mor)}
section.deniz .oz h3,section.mor .oz h3{color:var(--metin)}
section.deniz .oz p,section.mor .oz p{color:var(--metin-2)}

/* ikon kutuları: ikonu renkli bir zemine oturt */
.im-kutu{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;
  flex:none}
.im-kutu .im{width:23px;height:23px;margin:0}
.oz .im-kutu{margin-bottom:var(--a3)}
.im-kutu.kirmizi{background:var(--kirmizi-sis);color:var(--kirmizi-metin)}
.im-kutu.deniz{background:var(--deniz-sis);color:var(--deniz)}
.im-kutu.mor{background:var(--mor-sis);color:var(--mor)}
.im-kutu.yesil{background:#e6f2ec;color:var(--yesil)}
.im-kutu.tunc{background:var(--tunc-sis);color:var(--tunc)}
.im-kutu.gece{background:var(--gece-sis);color:var(--gece)}
section.koyu .im-kutu{background:rgba(255,255,255,.1);color:#fff}

/* sayı vurguları */
.rakamlar{display:grid;grid-template-columns:1fr;gap:var(--a5);margin-top:var(--a6)}
@media(min-width:700px){.rakamlar{grid-template-columns:repeat(3,1fr)}}
.rakam b{display:block;font-family:var(--f-bas);font-size:2.4rem;line-height:1;
  letter-spacing:-.03em;color:var(--lacivert);margin-bottom:6px}
.rakam span{color:var(--metin-2);font-size:.95rem}
section.koyu .rakam b{color:#fff}
section.koyu .rakam span{color:rgba(255,255,255,.7)}

/* ============ LOGO ============ */
.marka img{display:block;height:45px;width:auto}
.ust .marka{gap:0}
.alt .marka img{height:45px}
@media(max-width:560px){.marka img{height:34px}}
.giris-logo{display:block;margin:0 auto var(--a5);height:38px;width:auto}

/* Uygulama ve müşteri ekranlarının altındaki küçük imza */
.bg-imza{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:inherit}
.bg-imza img{height:18px;width:auto;display:block}


/* ============ SEKTÖRLER ============ */
/* Matbaacı, kendi iş kolunun adını görmediği sayfayı okumuyor. Kartlarda
   genel cümle değil, o sektöre ait somut bir ayrıntı var. */
.bulut{display:grid;grid-template-columns:1fr;gap:var(--a4);margin-bottom:var(--a7)}
@media(min-width:760px){.bulut{grid-template-columns:repeat(4,1fr)}}
.bulut div{border-top:2px solid var(--cizgi);padding-top:var(--a3)}
.bulut b{display:block;font-size:1.02rem;margin-bottom:3px}
.bulut span{color:var(--metin-2);font-size:.94rem;line-height:1.6}

.sektorler{display:grid;grid-template-columns:1fr;gap:var(--a4)}
@media(min-width:760px){.sektorler{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.sektorler{grid-template-columns:repeat(3,1fr)}}
.sektor{background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:var(--a5) var(--a4);display:flex;flex-direction:column;gap:var(--a2)}
.sektor h3{margin:var(--a3) 0 0;font-size:1.1rem}
.sektor .ne{color:var(--metin-2);font-size:.95rem;margin:0}
.sektor .vurgu{margin:var(--a3) 0 0;padding-top:var(--a3);border-top:1px solid var(--cizgi-2);
  color:var(--metin-2);font-size:.93rem;line-height:1.65}

/* ============ ÖRNEK İŞ AKIŞI ============ */
/* Numara ve dikey ray bilgi taşıyor: adımların sırası ve tek bir zincir
   olduğu, okunmadan önce görülüyor. */
.akis{list-style:none;margin:var(--a6) 0 0;padding:0}
.akis-adim{display:grid;grid-template-columns:38px 1fr;gap:var(--a4);
  position:relative;padding-bottom:var(--a6)}
@media(min-width:760px){.akis-adim{grid-template-columns:48px 1fr;gap:var(--a5)}}
.akis-adim::before{content:"";position:absolute;left:18px;top:40px;bottom:0;
  width:1px;background:var(--cizgi)}
.akis-adim:last-child::before{display:none}
.akis-no{width:38px;height:38px;border-radius:50%;background:var(--kagit);
  border:1px solid var(--cizgi);display:grid;place-items:center;position:relative;z-index:1;
  font-family:var(--f-mono);font-size:.78rem;font-weight:500;color:var(--kirmizi-metin)}
.akis-govde h2{font-size:1.26rem;margin:var(--a2) 0}
.akis-metin{color:var(--metin-2);margin:0 0 var(--a3)}
.akis-kim{display:inline-block;font-family:var(--f-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:var(--kagit-3);color:var(--metin-2)}
.akis-kim.k-musteri{background:var(--deniz-sis);color:var(--deniz)}
.akis-kim.k-temsilci{background:var(--mor-sis);color:var(--mor)}
.akis-kim.k-tasarimci{background:var(--tunc-sis);color:var(--tunc)}
.akis-kim.k-sistem{background:var(--kirmizi-sis);color:var(--kirmizi-metin)}
.akis-kim.k-matbaa{background:#e6f2ec;color:var(--yesil)}
.akis-maddeler{list-style:none;margin:0 0 var(--a4);padding:0;display:grid;gap:8px}
.akis-maddeler li{position:relative;padding-left:19px;color:var(--metin-2);
  font-size:.96rem;line-height:1.65}
.akis-maddeler li::before{content:"";position:absolute;left:3px;top:.68em;
  width:6px;height:6px;border-radius:50%;background:var(--cizgi)}
.akis-kayit{display:flex;gap:10px;align-items:flex-start;margin:0;
  background:var(--kagit);border:1px solid var(--cizgi);border-left:3px solid var(--deniz);
  border-radius:var(--r);padding:11px var(--a4);font-size:.93rem;color:var(--metin-2)}
.akis-kayit .im{width:17px;height:17px;color:var(--deniz);flex:none;margin-top:4px}
.akis-kayit b{color:var(--metin)}
.akis-kayit.yok{border-left-color:var(--metin-3)}
.akis-kayit.yok .im{color:var(--metin-3)}

/* Ücretsiz form sayfasındaki önizleme: kâğıt hissi versin, tıklanabilir olsun. */
.form-onizleme{display:block;max-width:440px;margin-inline:auto;
  border:1px solid var(--cizgi);border-radius:var(--r);
  overflow:hidden;background:var(--kagit);box-shadow:0 10px 30px rgba(19,23,40,.09);
  transition:box-shadow .15s ease, transform .15s ease}
.form-onizleme:hover{box-shadow:0 16px 40px rgba(19,23,40,.16);transform:translateY(-2px)}
.form-onizleme img{display:block;width:100%;height:auto}
