/* ==========================================================
   cizimci.com — yeni ana sayfa
   Tasarim konsepti: "milimetrik kagit + teknik olculendirme".
   Musterilerimiz gercekten kagida kaba bir kroki cizip yolluyor,
   biz onu 1 saatte fotograf kalitesinde 3D render'a ceviriyoruz --
   bu donusum sitenin gorsel diline dogrudan yansir.
   ========================================================== */

:root {
    --kagit: #eef2f7;
    --kagit-cizgi: #d7e0ea;
    --kagit-cizgi-ana: #b9c7d9;
    --lacivert: #1C3A5C;
    --lacivert-parlak: #2f6fed;
    --turuncu: #ea6a1f;
    --turuncu-koyu: #c8570f;
    --murekkep: #171a22;
    --murekkep-soft: #545b68;
    --beyaz: #ffffff;
    --yesil-onay: #1f7a3d;

    --font-baslik: 'Archivo', 'Arial Narrow', sans-serif;
    --font-govde: 'Inter', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-govde);
    color: var(--murekkep);
    background: var(--kagit);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.kapsayici { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---- Milimetrik kagit dokusu -- gercek muhendislik/kareli kagit
   gibi IKI katmanli izgara: ince alt-cizgiler + her 5. cizgide daha
   belirgin ana cizgi. Tek duz izgaradan cok daha "gercek kagit" hissi
   verir, cok da baskin olmasin diye opaklik dusuk tutuldu. ---- */
.izgarali {
    background-color: var(--kagit);
    background-image:
        linear-gradient(var(--kagit-cizgi-ana) 1px, transparent 1px),
        linear-gradient(90deg, var(--kagit-cizgi-ana) 1px, transparent 1px),
        linear-gradient(var(--kagit-cizgi) 1px, transparent 1px),
        linear-gradient(90deg, var(--kagit-cizgi) 1px, transparent 1px);
    background-size: 110px 110px, 110px 110px, 22px 22px, 22px 22px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* ---- Olculendirme cizgisi motifi (yapinin "01/02/03" yerine
   kullandigi tekrarlayan yapisal oge -- gercek bir olcum sureci
   oldugu icin numaralandirma burada anlamli). ---- */
.olcu-etiket {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--lacivert);
}
.olcu-etiket::before, .olcu-etiket::after { content: ""; width: 22px; height: 1px; background: var(--lacivert-parlak); }
.olcu-etiket.beyaz { color: #b9c6ef; }
.olcu-etiket.beyaz::before, .olcu-etiket.beyaz::after { background: #4a5fa8; }

/* ---- Adeko sayfalari ust chip navigasyonu ---- */
.adeko-chip-satiri { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
    margin-bottom: 20px; 
}

.adeko-chip {
    font-size: 12.5px; 
    font-weight: 700; 
    color: var(--murekkep-soft);
    background: #fff; 
    border: 1px solid var(--kagit-cizgi); 
    border-radius: 20px;
    padding: 7px 15px; 
    text-decoration: none; 
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap; /* Yazının chip içinde kırılıp alt satıra inmesini engeller */
}

.adeko-chip:hover { 
    border-color: var(--turuncu); 
    color: var(--turuncu); 
}

.adeko-chip.aktif { 
    background: var(--lacivert); 
    border-color: var(--lacivert); 
    color: #fff; 
}

/* Mobilde (600px ve altı) minimum satır atlaması için sıkıştırma ayarları */
@media (max-width: 600px) {
    .adeko-chip-satiri {
        gap: 5px; /* Chipler arası dış boşluğu daraltıyoruz */
        margin-bottom: 15px;
    }
    .adeko-chip {
        font-size: 11.5px; /* Fontu çok az küçültüyoruz */
        padding: 5px 10px; /* İç boşlukları daraltarak butonu küçültüyoruz */
    }
}
/* ---- Ana sayfa: "Az once yayinlandi" seridi -- SUREKLI AKAN,
   yari saydam, golgeli, firma adi silik/geri planda.
   NOT: bosluk icin flex 'gap' YERINE margin-right kullaniliyor --
   bazi eski mobil tarayicilar (ozellikle iOS Safari < 14.5) flex
   konteynerlerde 'gap' desteklemiyordu, bu da kartlarin bitisik
   gorunmesine VE (bazi WebKit surumlerinde mask-image ile birlikte)
   konteynerin genislik hesaplamasini sasirtip sayfanin anormal
   uzamasina yol aciyordu. margin-right her tarayicida calisir. */
.as-yeni-serit { background: var(--kagit); padding: 26px 0 30px; overflow: hidden; }
.as-yeni-serit-baslik-satiri { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.as-yeni-serit-baslik { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--lacivert); }
.as-yeni-serit-baslik-satiri a { font-size: 12.5px; color: var(--murekkep-soft); text-decoration: none; }
.as-yeni-serit-baslik-satiri a:hover { color: var(--turuncu); }

.as-yeni-serit-disari { width: 100%; overflow: hidden; }
.as-yeni-serit-kaydirici {
    display: flex; flex-wrap: nowrap; align-items: flex-start;
    width: max-content; padding: 6px 0 14px;
    animation: as-akis 46s linear infinite;
}
.as-yeni-serit-disari:hover .as-yeni-serit-kaydirici { animation-play-state: paused; }
@keyframes as-akis { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.as-yeni-serit-kart {
    flex: 0 0 auto; box-sizing: border-box; width: 190px; margin-right: 20px;
    text-decoration: none; background: #fff; overflow: hidden;
    opacity: .82; filter: saturate(.94);
    box-shadow: 0 10px 22px -10px rgba(15,23,55,.35), 0 3px 8px -2px rgba(15,23,55,.15);
    transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.as-yeni-serit-kart:hover {
    opacity: 1; filter: saturate(1); transform: translateY(-3px) scale(1.025);
    box-shadow: 0 18px 34px -12px rgba(15,23,55,.45), 0 6px 14px -4px rgba(15,23,55,.2);
}
.as-yeni-serit-kart img { width: 190px; height: 128px; object-fit: cover; display: block; transition: transform .4s ease, filter .4s ease; filter: blur(.4px); }
.as-yeni-serit-kart:hover img { transform: scale(1.045); filter: blur(0); }
.as-yeni-serit-firma {
    display: block; padding: 6px 10px 8px; font-size: 10px; font-weight: 400; letter-spacing: .01em;
    color: #a8adb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mobilde hover diye bir sey olmadigi icin (dokunmatik) -- desktop'taki
   "hover'da netlesir" mantigi mobilde islevsiz kalirdi, kullanici
   surekli soluk/bulanik gorurdu. Bu yuzden mobilde saydamlik/bulaniklik
   VE kose yuvarlatma TAMAMEN kaldirilir -- net, keskin kenarli. */
@media (max-width: 640px) {
    .as-yeni-serit-kart { width: 150px; margin-right: 14px; opacity: 1; filter: none; box-shadow: 0 6px 14px -6px rgba(15,23,55,.3); }
    .as-yeni-serit-kart img { width: 150px; height: 100px; filter: none; }
}

/* ================= HEADER ================= */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(238,242,247,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--kagit-cizgi);
	font-family: var(--font-govde);
}
.site-header .kapsayici { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.site-logo { flex-shrink: 0; margin-left: -22px; }
.site-logo img { height: 60px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 30px; margin: 0; }
.site-nav a {
    font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--murekkep);
    position: relative; padding: 4px 0;
}
.site-nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
    background: var(--turuncu); transition: right .2s ease;
}
.site-nav a:hover::after { right: 0; }
.site-nav a.aktif { color: var(--turuncu); }
.site-nav a.aktif::after { right: 0; }

.site-nav-acilir { position: relative; }
.site-nav-acilir-btn {
    background: none; border: none; cursor: pointer; font: inherit; color: var(--murekkep);
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; font-size: 14.5px; font-weight: 600;
}
.site-nav-acilir-btn svg { transition: transform .2s ease; flex-shrink: 0; }
.site-nav-acilir.aktif-sayfa .site-nav-acilir-btn { color: var(--turuncu); }
.site-nav-acilir-liste {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    /* GORUNMEZ kopru -- buton ile kutunun arasindaki gorsel boslugu
       PADDING olarak veriyoruz (gap DEGIL), boylece fare buton -> liste
       arasinda gecerken .site-nav-acilir'in hover alaninda KESINTISIZ
       kalir. Eskiden "top: calc(100% + 14px)" seklinde gercek bir GAP
       vardi -- fare o 14px'lik bosluktan gecerken hover kopup liste
       aninda kapaniyordu. */
    padding-top: 14px;
    display: none; z-index: 50;
}
.site-nav-acilir-liste-kutu {
    background: #fff; border: 1px solid var(--kagit-cizgi); border-radius: 8px;
    box-shadow: 0 12px 28px -8px rgba(15,23,55,.25);
    min-width: 190px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.site-nav-acilir-liste a {
    padding: 9px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--murekkep);
    text-decoration: none; white-space: nowrap;
}
.site-nav-acilir-liste a:hover { background: var(--kagit); }
.site-nav-acilir-liste a.aktif { background: var(--kagit); color: var(--turuncu); }
.site-nav-acilir:hover .site-nav-acilir-liste,
.site-nav-acilir.acik .site-nav-acilir-liste { display: block; }
.site-nav-acilir:hover .site-nav-acilir-btn svg,
.site-nav-acilir.acik .site-nav-acilir-btn svg { transform: rotate(180deg); }

.header-aksiyonlar { display: flex; align-items: center; gap: 10px; }

/* Ikinci menu satiri -- eski sitenin SARI ikinci menusunun karsiligi
   (Cizimler/Renkler/Kapak Modelleri/Cizim Indir/Olcu Gonder) --
   lacivert temada, ama AYNI 5 link/sira korunuyor. */
/* --- 1. MASAÜSTÜ (PC) İÇİN ESKİ ORİJİNAL KODLARINIZ --- */
.site-alt-nav { background: var(--lacivert); }
.site-alt-nav-ic { display: flex !important; gap: 2px; height: 36px !important; min-height: 30px !important; max-height: 36px !important; align-items: center; overflow-x: auto; }
.site-alt-nav-ic a {
    color: #fff; font-size: 11.5px; font-weight: 700; text-decoration: none;
    padding: 1px 9px !important; border-radius: 5px; white-space: nowrap; line-height: 1.4;
    transition: background .15s ease, color .15s ease;
}
.site-alt-nav-ic a:hover { background: rgba(255,255,255,.14); color: #fff; }
.site-alt-nav-ic a.aktif { background: rgba(255,255,255,.22); color: #fff; }
.btn {
    display: inline-flex; align-items: center; gap: 8px;justify-content: center;
    font-family: var(--font-govde); font-weight: 700; font-size: 14px;
    padding: 11px 20px; border-radius: 4px; text-decoration: none; cursor: pointer;
    border: 1.5px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-hat { border-color: var(--lacivert); color: var(--lacivert); }
.btn-hat:hover { background: var(--lacivert); color: #fff; }
.btn-dolu { background: var(--turuncu); color: #fff; }
.btn-dolu:hover { background: var(--turuncu-koyu); }
.btn-lacivert { background: var(--lacivert); color: #fff; }
.btn-lacivert:hover { background: #0f1a4a; }
.btn-buyuk { padding: 15px 28px; font-size: 15.5px; }
.btn-kucuk { padding: 8px 14px; font-size: 13px; }

/* Mobil menu */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--murekkep); margin: 5px 0; }


/* ==========================================================
   MOBIL ALT SEKME CUBUGU (uygulama-tarzi) -- SADECE mobilde.
   Anasayfa/Renkler/Kapak Modelleri kisayollari, header-menu.php
   tarafindan HER sayfada eklenir (bkz. site-header.css'teki AYNI
   kural icin daha detayli aciklama).
   ========================================================== */
.site-bottom-tabbar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: #fff; border-top: 1px solid var(--kagit-cizgi);
    box-shadow: 0 -4px 16px rgba(15,23,55,.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.site-bottom-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px 7px; text-decoration: none; color: var(--murekkep-soft);
    font-size: 10.5px; font-weight: 600; text-align: center;
}
.site-bottom-tabbar a svg { flex-shrink: 0; }
.site-bottom-tabbar a.aktif { color: var(--turuncu); }

/* ================= HERO ================= */
.hero { padding: 72px 0 90px; position: relative; overflow: hidden; }
.hero .kapsayici { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-baslik {
    font-family: var(--font-baslik); font-weight: 800; font-size: 50px; line-height: 1.08;
    letter-spacing: -.01em; margin: 18px 0 20px; color: var(--murekkep);
}
.hero-baslik em { font-style: normal; color: var(--lacivert); position: relative; }
.hero-alt {
    font-size: 17px; line-height: 1.65; color: var(--murekkep-soft); max-width: 480px; margin: 0 0 32px;
}
.hero-cta-satiri { display: flex; gap: 10px; margin-top: 1px; width: 100%; }
.hero-cta-satiri .btn { flex: 1; text-align: center; white-space: nowrap; padding: 10px 12px; font-size: 14px; max-width: 200px; }
.hero-guven { display: flex; gap: 26px; flex-wrap: wrap; }
.hero-guven-item { display: flex; flex-direction: column; }
.hero-guven-item strong { font-family: var(--font-mono); font-size: 22px; color: var(--lacivert); }
.hero-guven-item span { font-size: 12.5px; color: var(--murekkep-soft); }

/* ---- Hero gorsel: kroki -> render donusumu (imza oge) -- ARTIK
   GERCEK fotograflar (musterimizin gonderdigi bir kroki + bizim
   ciktigimiz gercek bir render), illustrasyon degil. ---- */
.hero-donusum {
    position: relative; aspect-ratio: 16/10.5; border-radius: 8px; overflow: hidden;
    background: #fff; border: 1px solid var(--kagit-cizgi); cursor: pointer;
    box-shadow: 0 30px 60px -20px rgba(22,36,101,.35);
}
.hero-donusum img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.katman-kroki { opacity: 1; transition: opacity 1.1s ease; }
.katman-render { opacity: 0; transition: opacity 1.1s ease; }
.hero-donusum.donustu .katman-kroki { opacity: 0; }
.hero-donusum.donustu .katman-render { opacity: 1; }
.donusum-etiket {
    position: absolute; left: 16px; bottom: 16px; z-index: 3;
    background: rgba(255,255,255,.95); border: 1px solid var(--kagit-cizgi);
    padding: 7px 13px; border-radius: 20px; font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 600; color: var(--lacivert); letter-spacing: .03em;
    transition: background .3s ease, color .3s ease;
}
.hero-donusum.donustu .donusum-etiket { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.donusum-sure {
    position: absolute; right: 16px; top: 16px; z-index: 3;
    background: var(--turuncu); color: #fff; font-family: var(--font-mono); font-weight: 700;
    font-size: 12px; padding: 6px 12px; border-radius: 20px;
}

/* ================= BOLUM BASLIKLARI (ortak) ================= */
.bolum { padding: 2px 0; }
.bolum-beyaz { background: #fff; }
/* Duz (izgarasiz) acik ton -- bolumler arasi ritim/ayrim icin, "kagit"
   rengiyle AYNI ama grid cizgisi yok -- fazla yalin/duz durmasin diye. */
.bolum-kagit { background: var(--kagit); }
.bolum-lacivert { background: var(--lacivert); color: #fff; }
.bolum-baslik-alani { max-width: 620px; margin-bottom: 48px; }
.bolum-baslik {
    font-family: var(--font-baslik); font-weight: 800; font-size: 34px; line-height: 1.15;
    margin: 14px 0 12px;
}
.bolum-aciklama { font-size: 15.5px; color: var(--murekkep-soft); line-height: 1.6; }
.bolum-lacivert .bolum-aciklama { color: #c3cdf0; }

/* ================= NASIL CALISIR (gercek 3 adimli surec -- numara burada anlamli) ================= */
.surec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.surec-grid::before {
    content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--kagit-cizgi) 0 10px, transparent 10px 18px);
}
.surec-adim { position: relative; padding: 0 22px; text-align: left; 

border-radius: 10px; padding: 30px 22px 26px;
    box-shadow: 0 20px 40px -20px rgba(15,23,55,.3), 0 4px 10px -3px rgba(15,23,55,.12);
    transition: transform .3s ease, box-shadow .3s ease;




}
.surec-adim:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 50px -18px rgba(15,23,55,.38), 0 8px 18px -4px rgba(15,23,55,.18);
}
.surec-no {
    width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 2px solid var(--lacivert);
    display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
    font-size: 22px; font-weight: 700; color: var(--lacivert); margin-bottom: 22px; position: relative; z-index: 2;
}
.surec-adim h3 { font-family: var(--font-baslik); font-size: 19px; margin: 0 0 8px; }
.surec-adim p { font-size: 14.5px; color: var(--murekkep-soft); line-height: 1.6; margin: 0; }
.surec-adim .kanal-listesi { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.kanal-etiket {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 4px 10px;
    background: var(--kagit); border: 1px solid var(--kagit-cizgi); border-radius: 4px; color: var(--murekkep-soft);
}

/* ================= HIZMET KATEGORILERI ================= */
.hizmet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--kagit-cizgi); border: 1px solid var(--kagit-cizgi); }
.hizmet-kart { background: #fff; padding: 30px 24px; transition: background .15s ease; }
.hizmet-kart:hover { background: var(--kagit); }
.hizmet-kart svg { width: 40px; height: 40px; color: var(--lacivert); margin-bottom: 16px; }
.hizmet-kart h3 { font-family: var(--font-baslik); font-size: 16px; margin: 0 0 6px; }
.hizmet-kart p { font-size: 13px; color: var(--murekkep-soft); margin: 0; line-height: 1.5; }

/* Gercek fotografli hizmet kartlari -- ust ust bindirme yerine
   gorsel+metin ayri (padding olmadan tam-genislik foto, altinda
   metin bandi) -- boylece gercek islerimiz oncelikli gorunur. */
.hizmet-kart-foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hizmet-kart-foto img { width: 100%; height: 150px; object-fit: cover; display: block; transition: transform .35s ease; }
.hizmet-kart-foto:hover img { transform: scale(1.06); }
.hizmet-kart-foto .hizmet-kart-metin { padding: 18px 20px 22px; }
.hizmet-kart-foto h3 { font-family: var(--font-baslik); font-size: 16px; margin: 0 0 6px; }
.hizmet-kart-foto p { font-size: 13px; color: var(--murekkep-soft); margin: 0; line-height: 1.5; }
.hizmet-kart-foto:hover { background: #fff; }

/* ================= FIYATLANDIRMA ================= */
.fiyat-tablo { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--kagit-cizgi); }
.fiyat-tablo th {
    text-align: left; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--murekkep-soft); font-weight: 600; padding: 14px 20px; border-bottom: 2px solid var(--murekkep);
}
.fiyat-tablo th:last-child, .fiyat-tablo td:last-child { text-align: right; }
.fiyat-tablo td { padding: 16px 20px; border-bottom: 1px solid var(--kagit-cizgi); font-size: 14.5px; }
.fiyat-tablo tr:last-child td { border-bottom: none; }
.fiyat-tablo tr:hover td { background: var(--kagit); }
.fiyat-deger { font-family: var(--font-mono); font-weight: 700; color: var(--lacivert); font-size: 16px; white-space: nowrap; }
.fiyat-degisim { font-family: var(--font-mono); font-size: 12.5px; color: var(--murekkep-soft); white-space: nowrap; }
.fiyat-not {
    margin-top: 18px; font-size: 13px; color: var(--murekkep-soft); background: var(--kagit);
    border-left: 3px solid var(--turuncu); padding: 12px 16px; line-height: 1.6;
}

/* ================= ADEKO / YAZILIM BOLUMU ================= */
.yazilim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.yazilim-kart {
    background: #fff; border: 1px solid var(--kagit-cizgi); border-radius: 8px; padding: 34px;
    display: flex; flex-direction: column;
}
.yazilim-rozet {
    align-self: flex-start; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 5px 11px; border-radius: 4px; margin-bottom: 18px; text-transform: uppercase;
}
.yazilim-rozet.bayi { background: #e8edfb; color: var(--lacivert); }
.yazilim-rozet.ozel { background: #fde9dc; color: var(--turuncu-koyu); }
.yazilim-kart h3 { font-family: var(--font-baslik); font-size: 21px; margin: 0 0 10px; }
.yazilim-kart p { font-size: 14.5px; color: var(--murekkep-soft); line-height: 1.65; margin: 0 0 20px; flex-grow: 1; }
.yazilim-ozellikler { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.yazilim-ozellikler li { font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
.yazilim-ozellikler li::before { content: "✓"; color: var(--yesil-onay); font-weight: 700; }
.yazilim-fiyat-satiri { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.yazilim-fiyat { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--lacivert); white-space: nowrap; }
.yazilim-fiyat-etiket { font-size: 12.5px; color: var(--murekkep-soft); }

/* ================= GUVEN / SAYILAR (lacivert bolum) ================= */
.sayi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px; }
.sayi-kart strong { display: block; font-family: var(--font-mono); font-size: 38px; font-weight: 700; color: #fff; }
.sayi-kart span { font-size: 13px; color: #b9c6ef; }

/* ================= CTA / ILETISIM ================= */
.cta-blok {
    background: #fff; border: 1px solid var(--kagit-cizgi); border-radius: 10px;
    padding: 54px 60px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center;
    margin-top: -140px; position: relative; z-index: 5;
    box-shadow: 0 30px 60px -25px rgba(22,36,101,.25);
}
.cta-blok h2 { font-family: var(--font-baslik); font-size: 28px; margin: 0 0 10px; }
.cta-blok p { font-size: 14.5px; color: var(--murekkep-soft); margin: 0; line-height: 1.6; }
.cta-iletisim { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta-iletisim a { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--lacivert); }
.cta-iletisim svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ================= FOOTER ================= */
.site-footer { background: var(--murekkep); color: #b8bcc6; padding: 20px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #33374a; }
.footer-logo img { height: 28px; margin-bottom: 14px; }
.footer-grid p { font-size: 13.5px; line-height: 1.7; color: #8b8fa0; max-width: 260px; }
.footer-baslik { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #6b7086; margin: 0 0 16px; }
.footer-linkler { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-linkler a { font-size: 13.5px; text-decoration: none; color: #b8bcc6; }
.footer-linkler a:hover { color: #fff; }
.footer-linkler a.aktif { color: #fff; font-weight: 700; }
.footer-indir-link { display: flex !important; align-items: center; gap: 5px; }
.footer-indir-link.uy-aktif { color: #fff !important; }
@keyframes uy-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.uy-ikon.uy-donen { animation: uy-spin 0.8s linear infinite; }
.footer-alt { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 12.5px; color: #6b7086; flex-wrap: wrap; gap: 10px; }
.footer-sosyal { display: flex; gap: 10px; }
.footer-sosyal a { width: 34px; height: 34px; border-radius: 50%; background: #262a3a; display: flex; align-items: center; justify-content: center; }
.footer-sosyal svg { width: 16px; height: 16px; color: #b8bcc6; }

/* ================= WHATSAPP FLOATING ================= */
.wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 200;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* ================= SCROLL REVEAL ================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.gorunur { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-donusum .katman-kroki, .hero-donusum .katman-render { transition: none; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px) {
    .hero .kapsayici { grid-template-columns: 1fr; }
    .hero-baslik { font-size: 38px; }
    .surec-grid { grid-template-columns: 1fr; gap: 40px; }
    .surec-grid::before { display: none; }
    .hizmet-grid { grid-template-columns: repeat(2, 1fr); }
    .yazilim-grid { grid-template-columns: 1fr; }
    .sayi-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-blok { grid-template-columns: 1fr; padding: 40px 30px; margin-top: -100px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .site-nav { position: fixed; top: 72px; left: 0; right: 0; background: #fff; flex-direction: column;
        align-items: flex-start; padding: 20px 24px; gap: 18px; border-bottom: 1px solid var(--kagit-cizgi);
        transform: translateY(-130%); transition: transform .25s ease; z-index: 99; margin: 0; max-height: 80vh; overflow-y: auto; }
    .site-nav.acik { transform: translateY(0); }
	.site-alt-nav-masaustu-ozel { display: none !important; }
.site-nav-mobil-ozel { display: block; }
    .menu-toggle { display: block; }
    .header-aksiyonlar .btn { padding: 9px 14px; font-size: 13px; }

    /* Hamburger solda / logo tam ortada / aksiyonlar sagda -- giris
       durumundan bagimsiz, SADECE bu genislikte. Logo GRID yerine
       ABSOLUTE ile ortalanir: menu-toggle ile header-aksiyonlar
       (Panelim/Giris Yap) FARKLI genislikte olabildigi icin (orn.
       "Panelim" metni hamburger ikonundan daha genis), grid'in iki
       1fr sutunu ESIT GORUNSE de ICERIK genislikleri farkli oldugunda
       GERCEKTE esit olmuyor (fr birimleri once icerigin minimum
       genisligini karsilar, KALAN alani esit boler -- bu da logoyu
       kaydiriyordu). Absolute+transform, iki yanin genisliginden
       TAMAMEN bagimsiz, matematiksel olarak KESIN ortalama saglar. */
    .site-header .kapsayici {
        position: relative;
        display: flex; align-items: center; justify-content: space-between;
    }
    .site-header .site-logo {
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        margin-left: 0;
    }
    .site-header .site-logo img { height: 44px; max-width: 147px; width: auto; }

    .site-nav-acilir { width: 100%; }
    .site-nav-acilir-btn { width: 100%; justify-content: space-between; font-size: 16px; }
    .site-nav-acilir-liste { position: static; transform: none; padding-top: 0; width: 100%; }
    .site-nav-acilir-liste-kutu { background: none; border: none; box-shadow: none; padding: 4px 0 0 12px; min-width: 0; }
    .site-nav-acilir:hover .site-nav-acilir-liste { display: none; }
    .site-nav-acilir.acik .site-nav-acilir-liste { display: block; }

    /* Alt-nav (Cizimler/Renkler/vb.) mobilde HER ZAMAN gorunur bu
       dosyada (anasayfa/genel/pazarlama sayfalari -- index.php,
       mutfak_cizimleri.php, renkler.php vb.) -- giris durumundan
       BAGIMSIZ. */
    .site-bottom-tabbar { display: flex !important; }
    body { padding-bottom: 58px; }

    /* Sabit WhatsApp balonu, alt sekme cubugu ile CAKISIYORDU (ikisi de
       bottom'a yakin sabit) -- balonu cubugun USTUNE ceker. */
    /* WhatsApp artik alt sekme cubugunun icinde (en sagda) -- mobilde
       ayni zamanda sabit/yuzen balonu da gostermek TEKRARA sebep
       olurdu, o yuzden mobilde balon tamamen gizlenir (masaustunde
       -- bu media query disinda -- aynen gorunmeye devam eder). */
    .wa-float { display: none; }

    .hero { padding: 40px 0 60px; }
    .hero-baslik { font-size: 30px; }
    .bolum { padding: 2px 0; }
    .bolum-baslik { font-size: 26px; }
    .hizmet-grid { grid-template-columns: 1fr; }
    .sayi-grid { grid-template-columns: 1fr 1fr; }
    .fiyat-tablo { font-size: 13px; }
    .fiyat-tablo th, .fiyat-tablo td { padding: 10px 12px; }
    .cta-blok { margin-top: -70px; }
.footer-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px 20px; /* Blokların alt alta ve yan yana yapışmaması için boşluk ekledik */
}
.footer-alt { 
    flex-direction: column; 
    align-items: flex-start; 
}
	
	
}

/* Sayfalama (numarali sayfa linkleri) -- hover + visited durumlariyla,
   uye panosundaki cizimlerim.css ile ayni gorunum. */
.sayfalar { display: flex; gap: 6px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.sayfalar a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px; box-sizing: border-box;
    background: #fff; border: 1px solid var(--kagit-cizgi); border-radius: 6px;
    color: var(--lacivert); text-decoration: none; font-size: 13px; font-weight: 600;
    font-family: var(--font-mono);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sayfalar a:hover { background: var(--kagit); border-color: var(--lacivert); }
.sayfalar a.aktif { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }

/* ================= OLCU ORNEKLERI (Bize Gonderecegin
   Olculeriniz Nasil Olmali) -- eski sitedeki Highslide galerisinin
   modern karsiligi. ================= */
.olcu-ornek-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 30px; }
.olcu-ornek-kart { background: #fff; border: 1px solid var(--kagit-cizgi); border-radius: 10px; padding: 26px; text-align: center; }
.olcu-ornek-baslik { display: block; font-size: 18px; font-weight: 700; color: var(--murekkep); margin-bottom: 18px; }
.olcu-ornek-resimler { display: flex; gap: 12px; }
.olcu-ornek-buyut { flex: 1; display: block; border-radius: 6px; overflow: hidden; cursor: zoom-in; border: 1px solid var(--kagit-cizgi); }
.olcu-ornek-buyut img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .25s ease; }
.olcu-ornek-buyut:hover img { transform: scale(1.08); }

.olcu-lightbox {
    position: fixed; inset: 0; z-index: 500; background: rgba(10,14,28,.92);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
    opacity: 0; visibility: hidden; transition: opacity .3s ease;
    padding: 30px;
}
.olcu-lightbox.acik { opacity: 1; visibility: visible; }
.olcu-lightbox img {
    max-width: min(92vw, 1040px); max-height: 84vh; width: auto; height: auto; border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55); background: #fff; cursor: pointer;
    transition: opacity .16s ease, transform .3s ease; transform: scale(.94);
}
.olcu-lightbox.acik img { transform: scale(1); }
.olcu-lightbox-baslik { color: #fff; font-size: 14px; font-weight: 600; text-align: center; max-width: 600px; }
.olcu-lightbox-kapat {
    position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,.12); border: none; color: #fff;
    width: 40px; height: 40px; border-radius: 50%; font-size: 22px; cursor: pointer; line-height: 1; z-index: 2;
}
.olcu-lightbox-kapat:hover { background: rgba(255,255,255,.24); }
.olcu-lightbox-onceki, .olcu-lightbox-sonraki {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff;
    width: 48px; height: 48px; border-radius: 50%; font-size: 28px; cursor: pointer; line-height: 1; z-index: 2;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.olcu-lightbox-onceki:hover, .olcu-lightbox-sonraki:hover { background: rgba(255,255,255,.24); }
.olcu-lightbox-onceki { left: 16px; }
.olcu-lightbox-sonraki { right: 16px; }
@media (max-width: 640px) {
    .olcu-lightbox-onceki, .olcu-lightbox-sonraki { width: 38px; height: 38px; font-size: 22px; }
    .olcu-lightbox-onceki { left: 6px; }
    .olcu-lightbox-sonraki { right: 6px; }
}

@media (max-width: 640px) { .olcu-ornek-grid { grid-template-columns: 1fr; gap: 18px; } .olcu-ornek-kart { padding: 18px; } .olcu-ornek-baslik { font-size: 15px; } }