/* =============================================
   COOKIE CONSENT
   ============================================= */
/* Renkler onceki temanin CSS degiskenlerinden geliyordu; bu temada o
   degiskenler tanimli degil, bu yuzden kutu zeminsiz kaliyor ve beyaz
   yazi beyaz sayfada okunmuyordu. Degisken adlari korundu, yedek deger
   olarak temanin siyah/beyaz paleti verildi. */
.cookie-consent {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    background: var(--dark-gray, #222);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    padding: 22px 24px;
    max-width: 320px;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-consent-text {
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    line-height: 1.65;
    margin: 0;
}

.cookie-consent-text a {
    color: var(--base-color, #fff);
    text-decoration: underline;
    font-weight: 600;
}

.cookie-consent-text a:hover {
    text-decoration: underline;
}

.cookie-consent-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    flex: 1;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.cookie-btn-accept {
    background-color: #fff;
    color: #222;
}

.cookie-btn-accept:hover {
    background-color: #ccc;
    color: #222;
}

.cookie-btn-reject {
    background-color: transparent;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.2);
}

.cookie-btn-reject:hover {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

@media (max-width: 480px) {
    .cookie-consent {
        bottom: 16px;
        right: 16px;
        left: 16px;
        max-width: 100%;
        width: auto;
        padding: 16px 18px;
        gap: 12px;
        border-radius: 12px;
    }
    .cookie-consent-text {
        font-size: 12px;
    }
    .cookie-btn {
        padding: 8px 8px;
        font-size: 11px;
    }
}



/* =============================================
   reCAPTCHA v3 ROZETİ
   Sağ alttaki yüzen rozet gizlenir. Google, rozet gizlendiğinde
   yerine atıf metninin görünür olmasını şart koşuyor; metin
   iletisim.php'de gönder butonunun altında yer alıyor.
   ============================================= */
.grecaptcha-badge {
    visibility: hidden;
}

/* Degiskenler bu temada tanimli degil; ikinci deger yedek renktir. */
.recaptcha-bilgi {
    clear: both;
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    color: var(--medium-gray, #999);
}

.recaptcha-bilgi a {
    color: var(--medium-gray, #999);
    text-decoration: underline;
}

.recaptcha-bilgi a:hover {
    color: var(--base-color, #000);
}

.white-link {
    color: #fff;
    text-decoration: none;
}
/* Anasayfa slaytinda gorseli koyulastirma. Acik zeminli fotograflarda
   baslik ve alt yazi okunmuyordu.

   Ustune ayri bir yari saydam katman (::after) konmuyor; koyulugu
   dogrudan arka plan katmanina filtre olarak veriyoruz. Sebebi:
   slotzoom gecisinde eski ve yeni slayt bir an ust uste duruyor,
   eskinin gorsel dilimleri saydamlasarak kayboluyor ama uzerindeki
   maske tam opaklikta kaldigi icin iki maske toplanip gecis aninda
   goze carpan bir koyulasma yapiyordu. Filtre boyanan piksele islendigi
   icin gorsel silikleserken koyuluk da onunla birlikte siliklesir;
   oran her karede ayni kalir.

   Filtre .slotholder'a veriliyor: gecisteki .slot parcalari da onun
   icinde oldugu icin hepsi ayni oranda kararir. Yazi katmanlari
   (.tp-parallax-wrap) disarida kaldigi icin etkilenmez.

   brightness(0.8) ~ %20 siyah. Daha koyu icin degeri kucultun. */
.rev_slider .slotholder {
    filter: brightness(0.7);
}

/* Logo view.php'de width="80%" ile basiliyor. Yalnizca 375px altindaki
   dar ekranlarda marka alani gercekten daraldigi icin tam genislige
   cikariliyor; 375-767 arasi zaten %80 ile yeterli buyuklukte. */
@media only screen and (max-width: 374px) {
    .brand img {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    /* Sablonda ikon olcusu 2.4vmin; dar ekranda vmin kucuk oldugu icin
       ~9px'e dusuyordu. Telefonda sabit punto veriliyor. */
    .social-list .fa {
        font-size: 16px;
    }

    /* Menu acikken ustte beliren logo tam genislikte cok buyuk kaliyor.
       Kosul menunun kendisine bagli: navbar-mobile sayfa kaydirilinca da
       .affix aliyor, o durumda logo degismemeli.
       Hem .collapsing hem .in gerekli: Bootstrap acilirken once .collapsing
       veriyor, .in'i ancak animasyon bitince ekliyor. Yalniz .in ile logo
       bir an tam boyda cizilip sonra kuculuyordu. .collapsing kapanirken de
       durdugu icin kucuk boy menu tamamen kapanana kadar korunuyor. */
    /* Menu acikken ust cubuk esnek satira cevriliyor: sablonda hamburger
       float:right oldugu icin logonun altina, ayri bir satira dusuyordu.
       align-items ile ikon logoyla dikeyde ortalaniyor, menunun kendisi
       tam genislikle alt satira geciyor.
       Logo olcusu artik .brand'in genisligi (asagidaki %35); gorsele
       yuzde verilirse esnek satirda taban genislik gorselin dogal
       boyutundan hesaplanip ikonu alt satira itiyor. */
    .navbar-mobile:has(.navbar-collapse.in),
    .navbar-mobile:has(.navbar-collapse.collapsing) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .navbar-mobile:has(.navbar-collapse.in) .brand,
    .navbar-mobile:has(.navbar-collapse.collapsing) .brand {
        flex: 0 1 35%;
        margin-right: auto;
        min-width: 0;
    }

    .navbar-mobile:has(.navbar-collapse.in) .brand img,
    .navbar-mobile:has(.navbar-collapse.collapsing) .brand img {
        width: 100%;
    }

    .navbar-mobile:has(.navbar-collapse.in) .navbar-collapse,
    .navbar-mobile:has(.navbar-collapse.collapsing) .navbar-collapse {
        flex: 0 0 100%;
    }
}

/* Slayt butonu telefonda. Slider, katman icindeki ogelere de kendi
   olcek oranini satir ici yaziyor (font-size, padding, letter-spacing);
   bu yuzden telefon olculeri !important olmadan gecmiyor. */
@media only screen and (max-width: 1192px) {
    .rev_slider .btn {
        font-size: 12px !important;
        line-height: 1.2 !important;
        padding: 11px 22px !important;
        letter-spacing: 0.1em !important;
    }
}

/* Telefonda bir tik daha kucuk. */
@media only screen and (max-width: 480px) {
    .rev_slider .btn {
        font-size: 11px !important;
        padding: 10px 20px !important;
    }
}

/* =============================================
   FOOTER
   Sablonun alt barinda marka metin ("go.arch") ve tek satirlik telif
   vardi; yerine logo, yasal sayfa linkleri ve ajans bilgisi konuldu.
   Bu siniflarin sablonda karsiligi olmadigi icin olculeri burada.
   ============================================= */
.footer .brand img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 46px;
}

.footer-legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-legal-list li {
    display: inline-block;
}

/* Ayrac: ilk oge disindaki her ogenin onune ince bir cizgi. */
.footer-legal-list li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin: 0 0.9em -0.1em;
    background-color: #d0d0d0;
}

.footer-legal-list a,
.footer-credit a {
    color: #aaa;
    text-decoration: none;
}

.footer-legal-list a:hover,
.footer-credit a:hover {
    color: #c5a47e;
    text-decoration: none;
}

.footer-credit {
    margin-top: 0.5em;
    color: #c5c4c2;
}

/* Dar ekranda uc sutun alt alta geliyor; hepsi ortali okunsun. */
@media only screen and (max-width: 991px) {
    .footer .brand img {
        max-height: 38px;
    }

    .footer-legal-list li + li::before {
        margin: 0 0.6em -0.1em;
    }
}

/* Sabit (sticky) ust cubukta logo. Sayfa kaydirilinca navbar .affix
   aliyor; logo orada da tam boyda cizildigi icin ince cubuga sigmiyordu
   (320x86). Menu acikken gecerli olan kural bundan daha belirgin, yani
   mobil menunun kendi olcusu bozulmuyor. */
.navbar-desctop.affix .brand img,
.navbar-mobile.affix .brand img {
    width: 100px;
}

/* =============================================
   IC SAYFA UST GORSEL ALANI
   Sablonun olculeri tamamen vmin: 1440x900'de ust bosluk 308px, alt
   306px ve alan 700px'e cikiyordu. clamp ile hem tavan hem taban
   veriliyor; boylece genis ekranda alan makul kaliyor, telefonda da
   baslik cubuga yapismiyor. Ortadaki vmin degeri arada yumusak gecisi
   surduruyor, ayri kirilma noktasi gerekmiyor.
   ============================================= */
.main-inner {
    padding-top: clamp(110px, 22vmin, 220px);
    padding-bottom: clamp(60px, 12vmin, 130px);
}

.main-projects,
.main-contacts,
.main-project {
    padding-top: clamp(110px, 22vmin, 220px);
    padding-bottom: clamp(70px, 16vmin, 170px);
}

/* Baslik da ayni mantikla: 8vmin genis ekranda 72px'e ciktigi icin
   daralan alanda orantisiz kaliyordu. */
.main-header h1 {
    font-size: clamp(28px, 5.6vmin, 56px);
}

/* Sol ust marka paneli: sablondaki olcu 40.7vmin yukseklik ve 4.8vmin
   dikey bosluktu; ust gorsel alani daraltilinca panel orantisiz kaldi. */
.brand-panel {
    height: 28vmin;
    padding: 2.4vmin 2em;
}

/* Ic sayfada dikey serit (cizgi + sosyal ikonlar) marka panelinin icinde
   duruyor; anasayfadaki gibi altinda devam eden beyaz serit yok. Panel
   kisaldikca sablonun bosluklari tasiriyordu, o yuzden yalnizca ic sayfada
   sikistiriliyor. Panelin ne kadar kisalabilecegini bu serit belirliyor. */
/* Serit sablonda 12.2vmin'den basliyordu; o olcu 40.7vmin'lik panele
   goreydi ve logo ile serit arasinda gereksiz bosluk birakiyordu. */
.header-inner .vertical-panel-content {
    top: 10.6vmin;
}

.header-inner .vertical-panel-info {
    margin-bottom: 1vmin;
}

.header-inner .vertical-panel-info .line {
    height: 2vmin;
    margin-top: 6px;
}

.header-inner .social-list {
    margin-bottom: 0;
}

.header-inner .social-list li {
    margin-top: 1.4vmin;
}

@media only screen and (max-width: 767px) {
    /* Telefonda yan bosluk dar; logo ust kenara fazla yakin durdugu icin
       ust bosluk biraz daha genis (anasayfa ve ic sayfa ayni). */
    .brand-panel {
        padding: 4.4vmin 1em 2.4vmin;
    }

    /* Ic sayfada dikey serit tamamen kaldiriliyor; panel de icerigi kadar,
       yani logo + bosluk kadar yer kapliyor. height:auto icin min-height
       sifirlanmali, yoksa sablonun tabani devrede kalir. */
    .header-inner .vertical-panel-content {
        display: none;
    }

    .header-inner .brand-panel {
        height: auto;
        min-height: 0;
    }

    /* Anasayfada panelin altinda slayt sayaci da var; ic sayfadaki logo
       yuksekligi orada dar kaliyor, o yuzden biraz daha yuksek. */
    .header-home .brand-panel {
        height: 34vmin;
    }
}

/* Cok genis ekranlarda logo. Gorsel view.php'de width="80%" ile basiliyor;
   marka paneli vmin ile buyudugu icin 1920 ustunde logo orantisiz kaliyor.
   Sticky cubuktaki 100px kurali daha belirgin, o etkilenmiyor. */
@media only screen and (min-width: 1920px) {
    .brand img {
        width: 60%;
    }

    /* Logo kuculdugu icin ic sayfada panel de bir tik alcaliyor. calc ile
       yazildi ki yukaridaki 28vmin tek yerden degistirilebilsin. */
    .header-inner .brand-panel {
        height: calc(28vmin - 50px);
    }
}

/* =============================================
   ILETISIM SAYFASI
   ============================================= */
/* Harita: panelden gelen deger hazir bir <iframe> gomme kodu, sabit
   yukseklikle geliyor. .gmap sutunu doldurdugu icin iframe de esnetiliyor;
   iki harita girilmisse alt alta esit yukseklikte paylasirlar. */
.gmap {
    display: flex;
    flex-direction: column;
}

.gmap iframe {
    flex: 1 1 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}

/* Bilgi kutusundaki baglantilar zeminle ayni beyaz; alt cizgi cikmasin. */
.contact-info a {
    color: #fff;
    text-decoration: none;
}

.contact-info a:hover {
    color: #f7f7f76e;
    text-decoration: none;
}

/* Form sonucu uyarisi. Sablonun kendi kutulari ajax'a bagli ve gizli
   oldugu icin kullanilmiyor; bunlar sunucu tarafi mesaj icin. */
.form-uyari {
    margin: 0 0 1.5em;
    padding: 0.9em 1.2em;
    border-left: 3px solid;
    font-size: 0.95em;
    line-height: 1.6;
}

.form-uyari-ok {
    border-color: #c5a47e;
    background-color: rgba(197, 164, 126, 0.12);
    color: #3d3d3d;
}

.form-uyari-hata {
    border-color: #c0392b;
    background-color: rgba(192, 57, 43, 0.08);
    color: #c0392b;
}

/* KVKK onay satiri. */
.form-onay {
    margin-top: 0.6em;
    font-size: 0.9em;
    line-height: 1.6;
}

.form-onay input {
    margin-right: 0.5em;
}

.form-onay a {
    color: #c5a47e;
    text-decoration: underline;
}

/* =============================================
   TALEP FORMU
   ============================================= */
/* Dosya kutusunda placeholder gorunmedigi icin etiket ayri basilir. */
.form-etiket {
    display: block;
    margin-bottom: 0.4em;
    font-size: 0.9em;
    font-weight: 400;
    color: #666;
}

.form-not {
    display: block;
    margin-top: 0.4em;
    font-size: 0.8em;
    color: #999;
}

/* Bolum basligi basilmadigi icin sablonun baslik altina koydugu 7.1em'lik
   bosluk da gerekmiyor. */
.talep-formu .section-content {
    margin-top: 0;
}

/* TALEP TURU
   Zeminsiz, cerceve olmayan radyo secenekleri; yan yana dizilir. Secili
   olanin yazisi koyulasir (:has destegi olmayan tarayicida yalnizca
   yerlesik radyo dugmesi isaretli kalir, form yine calisir). */
.form-radyolar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 2em;
    margin-bottom: 1.4em;
}

.form-radyo {
    display: flex;
    align-items: center;
    margin: 0;
    color: #666;
    font-weight: 400;
    cursor: pointer;
    transition: color .15s;
}

.form-radyo input {
    margin: 0 0.6em 0 0;
    accent-color: #c5a47e;
    cursor: pointer;
}

.form-radyo:hover,
.form-radyo:has(input:checked) {
    color: #3d3d3d;
}

/* Telefonda secenekler alt alta. */
@media only screen and (max-width: 575px) {
    .form-radyo {
        width: 100%;
    }
}

/* Telefonda iletisim bloklari. Sablonun olculeri genis ekrana gore:
   harita sutunu 35em, bilgi kutusunun ic boslugu 5.5em/5.6em. Dar
   ekranda ikisi de ekranin buyuk kismini yiyordu. */
@media only screen and (max-width: 767px) {
    .col-map {
        height: 18em;
    }

    .contact-info-content {
        padding: 2.6em 1.6em;
    }
}

/* Telefonda ic sayfa ust bolumu: panelin beyaz zemini kaldirilip logo
   dogrudan gorselin uzerine biniyor. Logo koyu renk oldugu icin filtre
   ile beyaza ceviriliyor (brightness(0) once tamamen siyah yapar,
   invert(1) beyaza cevirir; boylece logo dosyasinin ikinci bir surumu
   gerekmez). Sticky cubuktaki ve acik menudeki logo etkilenmez, onlar
   .navbar-mobile icinde ve zemini beyaz. */
@media only screen and (max-width: 767px) {
    .header-inner .brand-panel {
        background-color: transparent;
    }

    .header-inner .brand-panel .brand img {
        filter: brightness(0) invert(1);
    }

    /* Ic sayfa ust gorselindeki baslik sablonda saga yaslidir; dar ekranda
       logo ile ayni tarafta, sola alindi.
       padding-left sifirlanmali: sablon 38.5vmin'lik girintiyi yalnizca
       1200px ustunde kaldiriyor, telefonda basligi 150px iceri itiyordu. */
    .main-inner .main-header {
        text-align: left;
        padding-left: 0;
    }

    .main-inner .main-header h1 {
        margin-right: 0;
    }
}

/* Telefonda ic sayfa ust gorselinde baslik dikeyde ortaya yakin duruyordu;
   ust bosluk buyutulup alt bosluk kisiltilarak gorselin alt kismina
   yaklastirildi. Alanin toplam yuksekligi kabaca ayni kaliyor. */
@media only screen and (max-width: 767px) {
    .main-inner,
    .main-projects,
    .main-contacts,
    .main-project {
        padding-top: 34vmin;
        padding-bottom: 8vmin;
    }
}

/* IC SAYFA UST GORSELININ KOYULUGU -- tum ic sayfalar icin tek deger.
   Sablonda iki ayri karartma vardi: .main-inner'da #171717/0.6, iletisimde
   ise alttan uste acilan bir gradyan (altta %95, ustte %60). Bu yuzden
   sayfalar birbirinden farkli koyuluktaydi.
   Secici .main-inner: iletisim ve proje sayfalarindaki .main-contacts /
   .main-project da bu sinifi tasiyor. style.css'teki gradyani ezmesi
   ozgullukten degil, style2.css'in sonra yuklenmesinden geliyor.
   Filtre yerine duz siyah katman kullaniliyor: baslik .main-inner'in kendi
   cocugu oldugu icin filtre uygulansa yazi da kararirdi. Sonuc ayni --
   alfa 0.7'lik siyah katman pikseli 0.3 ile carpar.
   Koyulugu degistirmek icin tek yer: asagidaki 0.70. */
.main-inner::after {
    background: rgba(0, 0, 0, 0.70);
    opacity: 1;
}


.contact-info-content {
    background-color: rgb(197 164 125);}
/* Telefonda once iletisim bilgileri, sonra harita.
   .gmap sablonda position:absolute ve konumunu .contact-details'ten
   aliyor (masaustunde bilgi kutusunun arkasina yayilmasi icin). Sadece
   sira degistirmek yetmez: mutlak konumlu oge sirayla tasinmaz, harita
   yine en ustte kalirdi. O yuzden telefonda akisa aliniyor. */
@media only screen and (max-width: 767px) {
    .contact-details {
        display: flex;
        flex-direction: column;
    }

    .contact-details .contact-info {
        order: 1;
    }

    .contact-details .col-map {
        order: 2;
    }

    .contact-details .gmap {
        position: static;
        height: 100%;
    }
}

/* =============================================
   HAKKIMIZDA SAYFASI
   Sablonun about sayfasinda ekip, galeri ve dokuman bolumu yok; asagidaki
   siniflar panelden gelen bu icerikler icin eklendi.
   ============================================= */
/* Ekip kartlari sablonun .service-item duzenini kullaniyor; oradaki gorsel
   kucuk bir ikon oldugu icin boyut verilmemis, fotograf icin gerekiyor. */
.kisi-kart img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.6em;
}

.kisi-gorev {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c5a47e;
    margin-bottom: 1.2em;
}

.kisi-iletisim {
    list-style: none;
    margin: 1.2em 0 0;
    padding: 0;
    font-size: 0.95em;
}

.kisi-iletisim li {
    margin-top: 0.4em;
}

.kisi-iletisim a {
    color: #777;
    text-decoration: none;
}

.kisi-iletisim a:hover {
    color: #c5a47e;
}

.kisi-iletisim .fa {
    width: 1.4em;
    color: #c5a47e;
}

/* Ayni ust menudeki diger sayfalar: icerigin altinda tek satir. */
.kardes-sayfalar {
    list-style: none;
    margin: 3em 0 0;
    padding: 0;
}

.kardes-sayfalar li {
    display: inline-block;
    margin: 0 1.6em 0.8em 0;
}

.kardes-sayfalar a {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #777;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 0.3em;
}

.kardes-sayfalar a:hover,
.kardes-sayfalar .active a {
    color: #c5a47e;
    border-bottom-color: #c5a47e;
    text-decoration: none;
}

/* Dokuman listesi: her satir bir indirme baglantisi. */
.dokuman-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dokuman-liste li + li {
    margin-top: 0.6em;
}

.dokuman-liste a {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1.1em 1.4em;
    background-color: #f6f5f3;
    color: #3d3d3d;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.dokuman-liste a:hover {
    background-color: #c5a47e;
    color: #fff;
    text-decoration: none;
}

.dokuman-ad {
    flex: 1 1 auto;
    min-width: 0;
}

.dokuman-uzanti {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75em;
    letter-spacing: 0.16em;
    opacity: 0.6;
}

.dokuman-indir .fa {
    font-size: 1.1em;
}

/* Bolum araliklari telefonda. Sablon .section'a 7.1em ust/alt bosluk,
   .section-content'e de 7.1em ust bosluk veriyor; dar ekranda basliklarla
   icerik arasi bos ekran kadar yer kapliyordu. */
@media only screen and (max-width: 767px) {
    .section {
        margin-top: 3.2em;
        margin-bottom: 3.2em;
    }

    .section-content {
        margin-top: 2.8em;
    }

    .entry {
        margin: 1.6em 0;
    }
}

/* =============================================
   YASAL SAYFALAR (icerik.php)
   KVKK ve cerez metinleri uzun; sablonun .entry-text olcusu (1.4em) bu
   kadar metin icin buyuk kaliyor, ara basliklar ve listeler de sablonda
   tanimli degil. Asagidakiler yalnizca bu sayfalari etkiler.
   ============================================= */
.entry-yasal .entry-text {
    font-size: 1.1em;
    line-height: 1.9;
    color: #555;
}

.entry-yasal .entry-text p {
    margin: 0 0 1.2em;
}

.entry-yasal .entry-text h4 {
    margin: 2em 0 0.7em;
    font-size: 1.15em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #3d3d3d;
}

.entry-yasal .entry-text ul {
    margin: 0 0 1.4em;
    padding-left: 1.3em;
    list-style: disc;
}

.entry-yasal .entry-text li {
    margin-bottom: 0.5em;
}

.entry-yasal .entry-text a {
    color: #c5a47e;
    text-decoration: underline;
}

.entry-yasal .entry-text strong {
    color: #3d3d3d;
}

/* Alt baslik uzun oldugu icin sablonun 2.8em'lik olcusu satirlari tasiyordu. */
.entry-yasal .entry-title {
    font-size: 2em;
    line-height: 1.35;
}

/* =============================================
   404 SAYFASI (404.php)
   Ust gorsel + baslik diger ic sayfalarla ayni; asagidakiler ortadaki
   hata blogu icin. Sablonda karsiligi olmayan siniflar.
   ============================================= */
.hata-sayfasi .hata-kod {
    font-family: 'Oswald', sans-serif;
    font-size: 9em;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #c5a47e;
    opacity: 0.35;
    margin-bottom: 0.25em;
}

.hata-sayfasi .hata-yazi {
    max-width: 34em;
    margin: 0 auto 1.2em;
    font-size: 1.15em;
    line-height: 1.8;
    color: #555;
}

.hata-sayfasi .hata-sayac {
    margin-bottom: 2.4em;
    font-size: 0.9em;
    letter-spacing: 0.08em;
    color: #999;
}

.hata-sayfasi .hata-sayac span {
    color: #c5a47e;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .hata-sayfasi .hata-kod {
        font-size: 5.5em;
    }
}

/* =============================================
   PROJE DETAY (proje.php)
   Sira: ust gorselde baslik + tur/yil, altinda aciklama, video ve
   gorseller. Gorsel izgarasi temanin .project kartlarini kullandigi icin
   ayri kural gerektirmez; asagidakiler baslik satiri ve video icin.
   ============================================= */
/* Ust gorseldeki bilgi satiri (yil / tur). Sablonun olcusu 2vmin: genis
   ekranda basliga yakin buyuklukte kaliyor, dar ekranda ~7px'e dusuyordu.
   clamp ile iki uc da sinirlandi, harf araligi bir tik daraltildi. */
.main-project .project-title-info {
    font-size: clamp(10px, 1.15vmin, 12px);
    letter-spacing: 0.16em;
    margin-top: 1.4em;
}

.main-project .project-info-item {
    opacity: 0.9;
}

/* Proje logosu: aciklamanin ustunde. Yuklenen dosyanin olcusu ne olursa
   olsun genisligi 150px'i gecmez, yukseklik orana gore hesaplanir. */
.proje-logo {
    margin-bottom: 2.4em;
}

.proje-logo img {
    display: block;
    width: auto;
    max-width: 150px;
    height: auto;
}

/* Aciklama: sablonun .entry-text olcusu (1.4em) uzun paragraflarda
   buyuk kaliyor. */
.proje-aciklama .entry-text {
    font-size: 1.15em;
    line-height: 1.85;
}

.proje-aciklama .entry-text p:last-child {
    margin-bottom: 0;
}

/* Video kendi bolumunde, aciklama ile gorseller arasinda. Sablonun .section
   marji (7.1em ust/alt) burada fazla kaldigi icin sifirlandi. */
.proje-bolum {
    margin-top: 0;
    margin-bottom: 0;
}

/* Video: 16:9 cerceve. Birden fazla video varsa alt alta, aralarinda
   bosluk. Baslik varsa cercevenin altinda kucuk punto. */
.proje-video-oge {
    margin: 0 0 2.4em;
}

.proje-video-oge:last-child {
    margin-bottom: 0;
}

.proje-video-cerceve {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #111;
    overflow: hidden;
}

.proje-video-cerceve iframe,
.proje-video-cerceve video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.proje-video-oge figcaption {
    margin-top: 0.9em;
    font-size: 0.9em;
    letter-spacing: 0.06em;
    color: #777;
}

/* aspect-ratio desteklemeyen eski tarayicilar icin. */
@supports not (aspect-ratio: 1) {
    .proje-video-cerceve {
        height: 0;
        padding-bottom: 56.25%;
    }
}

/* GORSELLER
   CSS grid: sutunlar en az 300px, sigdigi kadar. Kutular 4:3 oraninda,
   gorsel ortadan kirpilarak kutuyu doldurur; boylece panelden farkli
   olculerde gorsel yuklense de izgara duzgun kalir.
   Temanin .project karti kullanilmadi: o kartta gorselin uzerinde surekli
   duran koyu perde var. Burada gorsel kendi haliyle gorunur, perde ve
   baslik yalnizca uzerine gelinince belirir. */
/* Bolumun ust/alt boslugu: sablonun .section olcusu (7.1em) burada fazla,
   ustteki aciklama bolumunun kendi alt marji zaten ayirmis oluyor. */
.proje-galeri-bolum {
    margin-top: 0;
    margin-bottom: 3.2em;
}

.proje-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.proje-galeri-oge {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #f3f3f3;
}

.proje-galeri-oge img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.proje-galeri-oge:hover img {
    transform: scale(1.06);
}

/* Uzerine gelinince gorseli hafifce koyulastiran perde: alt kenardaki
   baslik okunabilsin diye asagida daha koyu. */
.proje-galeri-oge::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.75), rgba(17, 17, 17, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.proje-galeri-oge:hover::after {
    opacity: 1;
}

.proje-galeri-baslik {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.2em 1.4em;
    font-family: 'Oswald', sans-serif;
    font-size: 1.05em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s ease;
}

.proje-galeri-oge:hover .proje-galeri-baslik {
    opacity: 1;
    transform: none;
}

/* Telefonda da iki sutun; minmax(300px) tek sutuna dusurdugu icin sutun
   sayisi burada sabitleniyor, bosluk da daraltiliyor. */
@media only screen and (max-width: 767px) {
    .proje-galeri {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .proje-galeri-bolum {
        margin-bottom: 2.2em;
    }
}

/* aspect-ratio desteklemeyen eski tarayicilar icin: gorsel dogal
   yuksekligiyle basilir, izgara yine calisir. */
@supports not (aspect-ratio: 1) {
    .proje-galeri-oge img {
        height: auto;
    }
}


/* =============================================
   PROJE LISTESI (sayfalar.php)
   Kartlar sablonun .project duzenini kullaniyor; asagidakiler filtre
   cubugu ve filtreleme animasyonu icin.
   ============================================= */
.proje-filtre {
    text-align: center;
    margin-bottom: 3.2em;
}

.proje-filtre-oge {
    display: inline-block;
    margin: 0 1.4em 0.8em;
    padding-bottom: 0.4em;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #777;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.proje-filtre-oge:hover,
.proje-filtre-oge.aktif {
    color: #c5a47e;
    border-bottom-color: #c5a47e;
    text-decoration: none;
}

/* Izgara ust gorselin hemen altinda baslasin: sablonun .section kurali
   7.1em ust bosluk veriyor, projects.html'de ise izgara gorsele dayanik.
   Yalnizca proje listesi bolumunu (#projects) etkiler; galeri bolumu
   (#media) ayni sinifi tasidigi icin id ile hedeflendi. */
#projects.section {
    margin-top: 3.2em;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    #projects.section {
        margin-top: 2.2em;
    }
}

/* DURUM SEKMELERI
   Liste "Tamamlanan Projeler" ve "Devam Eden Projeler" olarak ikiye
   ayrilir; sekme cubugundan hangisi secilirse yalnizca o grubun izgarasi
   gorunur (bkz. sayfalar.php). Sekmeye tiklandiginda kartlar filtre
   cubugundakiyle ayni .beliriyor animasyonuyla sirayla gelir.

   Iki ayri sinif var: sekme-kapali sekme cubugunun kapattigi gruba,
   gizli ise (filtre cubugu acikken) karti kalmayan gruba verilir. Ayri
   tutuldular ki biri digerinin actigi grubu kapatmasin. */
.proje-grup.sekme-kapali,
.proje-grup.gizli {
    display: none;
}

/* Sekmeler filtre cubugundaki duz yazi gorunumunde: zemin ya da cerceve
   yok, secili olanin altinda altin cizgi var. Filtre ogelerinden farki
   kalin yazi ve biraz daha buyuk punto -- iki secenek de uzaktan okunsun.
   Cubuk flex: iki sekme mobilde de yan yana kalir, dar ekranda yazi kendi
   sutununda iki satira iner (metin dil dosyasindan geldigi icin
   kisaltilmaz). */
.proje-durum-cubuk {
    display: flex;
    justify-content: center;
    gap: 2.8em;
    margin-bottom: 3.2em;
}

.proje-durum-oge {
    flex: 0 1 auto;
    padding-bottom: 0.5em;
    font-family: 'montserratsemibold', 'Montserrat', sans-serif;
    font-size: 1em;
    line-height: 1.35;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: #777;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    /* Harf araligi son harften sonra da bosluk biraktigi icin yazi saga
       kayiyor; ayni oranda sola cekiliyor. */
    text-indent: 0.18em;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.proje-durum-oge:hover,
.proje-durum-oge:focus,
.proje-durum-oge.aktif {
    color: #c5a47e;
    border-bottom-color: #c5a47e;
    text-decoration: none;
}

@media only screen and (max-width: 767px) {
    .proje-durum-cubuk {
        gap: 1.4em;
        margin-bottom: 2.4em;
    }

    /* Iki sekme ekrani esit paylasir; min-width:0 olmadan flex ogeleri
       icerik genisliginin altina inmez ve cubuk tasardi. */
    .proje-durum-oge {
        flex: 1 1 0;
        min-width: 0;
        font-size: 0.82em;
        letter-spacing: 0.08em;
        text-indent: 0.08em;
    }
}

/* Izgara container icinde, CSS grid: satir basina iki kart, aralarinda
   bosluk. Bootstrap sutunlari kullanilmiyor; filtreleme betigi de kartlari
   display ile gizledigi icin grid ile sorunsuz calisir. */
.proje-izgara {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media only screen and (max-width: 767px) {
    .proje-izgara {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Kartlar 16:9 oraninda; panelden hangi olcude gorsel yuklenirse
   yuklensin izgara bozulmasin diye oran sabit tutulup gorsel ortadan
   kirpilir. */
.proje-oge figure {
    overflow: hidden;
}

/* Gorselin uzerindeki koyu perde. Sablonda 0.7 opaklik var, gorseller
   fazla karariyordu; baslik hala okunacak kadar perde birakilarak
   hafifletildi (uzerine gelinince sablon perdeyi zaten tamamen kaldirir). */
.proje-oge figure:after {
    opacity: 0.4;
}

/* BUYUTEC DAIRESI
   Uzerine gelinince kartin ortasinda beliren daire. Sablonun olcusu 9em,
   kartlarin yaninda cok buyuk kaliyordu; daire ve icindeki ikon ayni
   oranda kucultuldu. Kural genel: .project kartinin kullanildigi tum
   sayfalari (proje listesi, galeriler) etkiler. */
.project-zoom {
    width: 5em;
    height: 5em;
    margin: -2.5em;
}

.project-zoom:after {
    width: 1.5em;
    height: 1.5em;
}

.proje-oge figure img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Kart 16:9'da alcak kaldigi icin sablonun 3.2em/3.6em'lik yazi alani
   boslugu kisaltildi; baslik da bir tik kuculdu. */
.proje-oge figcaption {
    margin: 1.6em 1.8em;
}

.proje-oge .project-title {
    font-size: 1.2em;
}

/* Kategori etiketi sablonda -90 derece dondurulup kartin soluna
   yaslanir; o duzen dikey (480x880) kartlar icin. 16:9 kartta dikey
   etiket tastigi icin duz satira alinip basligin altina konuldu. */
.proje-oge .project-category {
    position: static;
    transform: none;
    margin: 0.5em 0 0;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Sablon, uzerine gelinince etiketi harf araligini acarak soldurur;
   duz satirda bu tasma yapiyor, yalnizca solma birakildi. */
.proje-oge figure:hover .project-category {
    letter-spacing: 0.28em;
}

/* aspect-ratio desteklemeyen eski tarayicilar icin: gorsel yine de
   kartin tamamini doldursun. */
@supports not (aspect-ratio: 1) {
    .proje-oge figure {
        position: relative;
        padding-bottom: 56.25%;
    }

    .proje-oge figure img {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
    }
}

/* Filtre gecisi. Once duran kartlar soluyor, sonra kalanlar sirayla
   beliriyor; JS bu uc sinifi yonetiyor (bkz. sayfalar.php). */
.proje-oge.gizli {
    display: none;
}

.proje-oge.solma {
    opacity: 0;
    transition: opacity 200ms ease;
}

.proje-oge.beliriyor {
    animation: projeBelir 320ms ease both;
}

@keyframes projeBelir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* GALERI + DOKUMANLAR
   Ikisi tek bolumde (#media) ve tek container icinde. Genel .section
   marji (7.1em ust/alt) burada kalkiyor; ustteki bolum kendi alt
   marjini korudugu icin yukaridan ayrilma devam eder. */
#media.section {
    margin-top: 0;
    margin-bottom: 0;
}

/* Container icindeki iki blok arasindaki ayirici. */
.media-blok + .media-blok {
    margin-top: 2em;
}

/* Bu iki blokta bolum basligi yok; sablonun .section-content'e verdigi
   7.1em ust bosluk da bu yuzden gereksiz, blogun tepesinde bos alan
   birakiyordu. Bloklar arasindaki mesafeyi yukaridaki ayirici veriyor. */
.media-blok .section-content {
    margin-top: 0;
}

/* Galeri gorselleri 16:9 kirpilir. Panelden gelen gorseller farkli
   oranlarda olabildigi icin izgarada satirlar kayiyordu; object-fit
   ile gorsel oranini bozmadan ortadan kirpilir. */
#gallery .project figure img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* Galeri izgarasi. Sablonun proje listesi kartlari bitisik dizer
   (.project'in yan boslugu sifir, Bootstrap sutunlari float); galeride
   gorseller arasi bosluk isteniyor, bu yuzden satir CSS grid'e cevriliyor.
   float ve yuzde genislik sifirlanmali, yoksa grid hucreleri bozulur. */
#gallery .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6em;
    margin: 0;
}

/* Bootstrap .row'un clearfix'i (::before / ::after) grid baglaminda birer
   hucre isgal ediyor ve ilk gorsel ikinci sutundan basliyordu. */
#gallery .row::before,
#gallery .row::after {
    display: none;
}

#gallery .row .project {
    float: none;
    width: auto;
    padding: 0;
}

@media only screen and (max-width: 991px) {
    #gallery .row {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2em;
    }
}

@media only screen and (max-width: 575px) {
    #gallery .row {
        grid-template-columns: 1fr;
    }
}