@charset "utf-8";
/* ==========================================================================
   SÜTEM · alt sayfa katmanı
   --------------------------------------------------------------------------
   sutem.css'in üstüne biner: jetonlar, üst bant, alt bant ve .btn / .reveal
   gibi ortak parçalar oradan gelir. Burada yalnızca alt sayfalara özgü
   düzenler var, dolayısıyla ana sayfa bu dosyayı yüklemez.

   Ana sayfa sinematik bir gezinti; alt sayfa okunmak için var. Aynı dil
   (süt zemin, Bodoni başlık, altın eyebrow, mavi vurgu) korunur ama
   perdeler pinlenmez, bölümler normal akışta ilerler.
   ========================================================================== */

.sayfa{background:var(--ground)}
.sayfa section{padding:clamp(72px,9vh,124px) 32px}
.kab{max-width:var(--max);margin:auto}

/* --------------------------------------------------------------- başlık --- */
/* Tam ekran değil: fotoğraf bir bant, künye sütten bir havuzun üstünde. */
.sayfa-bas{
  position:relative;padding:0;
  min-height:clamp(430px,62vh,640px);
  display:grid;align-content:end;
  background:var(--ground3);overflow:hidden;
}
.sayfa-bas picture{position:absolute;inset:0}
.sayfa-bas img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
}
.sayfa-bas:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(246,243,236,.98) 0%,rgba(246,243,236,.96) 28%,rgba(246,243,236,.78) 46%,rgba(246,243,236,.34) 66%,rgba(246,243,236,0) 86%),
    linear-gradient(0deg,rgba(246,243,236,.62) 0%,rgba(246,243,236,.18) 24%,rgba(246,243,236,0) 46%);
}
.sayfa-bas .kab{position:relative;z-index:2;width:100%;padding:0 32px clamp(42px,7vh,78px)}
.sayfa-bas h1{
  font:600 clamp(34px,4vw,65px)/1.04 var(--serif);
  letter-spacing:-.035em;margin:12px 0 18px;max-width:15ch;color:var(--ink);
}
.sayfa-bas h1 em{font-style:normal;color:var(--blue)}
.sayfa-bas p{max-width:42ch;font-size:clamp(15px,1.15vw,17px);line-height:1.74;color:var(--ink2);margin:0}

/* İz: neredeyiz. */
.iz{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink4)}
.iz a{color:var(--ink2)}
.iz a:hover{color:var(--blue)}
.iz span{color:var(--gold-d)}

/* ---------------------------------------------------------- marka sözü --- */
.soz{background:var(--ground)}
.soz .kab{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4.5vw,84px);align-items:start}
.soz-metin p.soz-lead{
  margin:0 0 16px;max-width:22ch;
  font:600 clamp(26px,2.6vw,42px)/1.16 var(--serif);
  letter-spacing:-.03em;color:var(--ink);
}
.soz-metin p.soz-lead em{font-style:normal;color:var(--blue)}
.soz-metin p.soz-imza{
  margin:0 0 30px;
  font:600 clamp(19px,1.5vw,24px)/1 var(--serif);
  letter-spacing:.14em;color:var(--ink);
}
.soz-metin p.soz-imza:after{content:"";display:block;width:34px;height:1px;margin-top:14px;background:var(--blue)}
.soz-metin p{font-size:15px;line-height:1.8;color:var(--ink2);margin:0 0 16px;max-width:56ch}
.soz-metin p:last-child{margin-bottom:0}
.soz figure{margin:0}
.soz figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 42%;background:var(--ground3)}
.soz figcaption{margin-top:12px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink4)}

/* ------------------------------------------------------------ rakamlar --- */
.rakamlar{background:var(--ground2)}
.rakam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
.rakam{background:var(--ground2);padding:clamp(26px,3.4vw,44px) clamp(18px,2vw,30px)}
/* Göz sayısı panelden değişiyor; son satır yarım kalırsa boş gözler
   cetvel rengini zemin alıp gri kutu gibi görünüyor. Son öğe kalan
   payı kapatıyor. */
.rakam:last-child:nth-child(3n+1){grid-column:span 3}
.rakam:last-child:nth-child(3n+2){grid-column:span 2}
.rakam b{
  display:block;font:600 clamp(38px,4.4vw,72px)/1 var(--serif);
  letter-spacing:-.035em;color:var(--ink);margin-bottom:12px;
}
.rakam span{display:block;font-size:13px;line-height:1.6;color:var(--ink2);max-width:26ch}

/* ------------------------------------------------------------- tarihçe --- */
.tarihce{background:var(--ground)}
.tarihce-bas{margin-bottom:clamp(38px,5vh,64px);max-width:44ch}
.donemler{display:grid;gap:0}
.donem{
  display:grid;grid-template-columns:clamp(96px,10vw,150px) 1fr;
  gap:clamp(20px,3vw,54px);
  padding:clamp(26px,3.6vh,46px) 0;
  border-top:1px solid var(--hair);
}
.donem:last-child{border-bottom:1px solid var(--hair)}
.donem-yil{
  font:600 clamp(28px,2.8vw,44px)/1 var(--serif);
  letter-spacing:-.02em;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.donem-yil small{display:block;margin-top:10px;font:600 10px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.donem h3{font:600 clamp(22px,2.2vw,34px)/1.18 var(--serif);letter-spacing:-.025em;margin:0 0 14px;color:var(--ink)}
.donem p{font-size:15px;line-height:1.78;color:var(--ink2);margin:0 0 20px;max-width:58ch}
.donem-notlar{display:grid;max-width:900px;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,32px);margin:0;padding:0;list-style:none}
.donem-notlar b{display:block;font:600 13px/1.3 var(--sans);letter-spacing:.01em;color:var(--ink);margin-bottom:6px}
.donem-notlar span{font-size:12px;line-height:1.6;color:var(--ink3)}

/* ---------------------------------------------------- misyon/vizyon/... --- */
.ilkeler{background:var(--ground2)}
.ilke-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,56px);margin-top:clamp(36px,5vh,58px)}
.ilke{border-top:1px solid var(--hair2);padding-top:22px}
.ilke .no{display:block;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);margin-bottom:16px}
.ilke h3{font:600 clamp(22px,2.1vw,32px)/1.16 var(--serif);letter-spacing:-.025em;margin:0 0 14px;color:var(--ink)}
.ilke p{font-size:14px;line-height:1.76;color:var(--ink2);margin:0 0 12px}
.ilke p:last-child{margin-bottom:0}

/* --------------------------------------------------------- sertifikalar --- */
.kalite{background:var(--ground)}
.kalite .kab{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,4vw,76px);align-items:center}
.belge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair)}
.belge:last-child:nth-child(odd){grid-column:span 2}
.belge{background:var(--ground);padding:clamp(22px,2.6vw,34px)}
.belge b{display:block;font:600 clamp(20px,1.9vw,28px)/1 var(--serif);letter-spacing:.01em;color:var(--ink);margin-bottom:10px}
.belge span{font-size:12px;line-height:1.6;color:var(--ink3)}

/* -------------------------------------------------------------- tesis --- */
.tesis{background:var(--ground2)}
.tesis-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.1vw,16px);margin-top:clamp(34px,4.5vh,54px)}
.tesis-grid figure{position:relative;margin:0;overflow:hidden;background:var(--ground3)}
.tesis-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.tesis-grid figcaption{
  position:absolute;left:18px;bottom:14px;z-index:2;
  font:600 clamp(18px,1.7vw,28px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink);
}
.tesis-grid figure:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(246,243,236,.94) 0%,rgba(246,243,236,.34) 32%,rgba(246,243,236,0) 60%);
}

/* ---------------------------------------------------------------- çağrı --- */
.cagri{background:var(--ink);color:var(--white)}
.cagri .kab{display:grid;grid-template-columns:1fr auto;gap:clamp(26px,4vw,64px);align-items:end}
.cagri small{display:block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.cagri h2{font:600 clamp(28px,3.2vw,52px)/1.06 var(--serif);letter-spacing:-.035em;margin:12px 0 0;color:var(--white)}
.cagri p{margin:16px 0 0;max-width:46ch;font-size:14px;line-height:1.78;color:rgba(255,253,248,.72)}
.cagri .actions{margin-top:0}
.cagri .btn{color:var(--white);border-color:rgba(255,253,248,.4)}
.cagri .btn:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

/* ------------------------------------------------------- ortak başlıklar --- */
.bolum-bas small{display:block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);margin-bottom:14px}
.bolum-bas h2{font:600 clamp(26px,2.9vw,47px)/1.08 var(--serif);letter-spacing:-.035em;margin:0;color:var(--ink)}
.bolum-bas p{margin:18px 0 0;max-width:56ch;font-size:15px;line-height:1.78;color:var(--ink2)}

@media(max-width:1050px){
  .soz .kab,.kalite .kab{grid-template-columns:1fr}
  .soz figure{order:-1}
  .soz figure img{aspect-ratio:16/9}
  .ilke-grid{grid-template-columns:1fr;gap:30px}
  .cagri .kab{grid-template-columns:1fr;align-items:start}
}
@media(max-width:760px){
  .sayfa section{padding:clamp(54px,7vh,84px) 18px}
  .sayfa-bas .kab{padding:0 18px 38px}
  .sayfa-bas:after{
    background:linear-gradient(0deg,
      rgba(246,243,236,.98) 0%,
      rgba(246,243,236,.96) 40%,
      rgba(246,243,236,.84) 62%,
      rgba(246,243,236,.45) 80%,
      rgba(246,243,236,0) 100%);
  }
  .rakam-grid{grid-template-columns:repeat(2,1fr)}
  /* Tek sayıda göz varsa sonuncusu satırı doldursun: boş göz, cetvel
     rengini zemin aldığı için gri bir kutu gibi görünüyor. */
  .rakam:last-child:nth-child(odd),
  .belge:last-child:nth-child(odd){grid-column:1/-1}
  .donem{grid-template-columns:1fr;gap:16px}
  .donem-yil{display:flex;align-items:baseline;gap:14px}
  .donem-yil small{margin-top:0}
  .donem-notlar{grid-template-columns:1fr;gap:14px}
  .tesis-grid{grid-template-columns:1fr}
  .tesis-grid img{aspect-ratio:16/9}
  .belge-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   Ürün listesi, ürün detayı ve iletişim formu.
   ========================================================================== */

/* ----------------------------------------------------- ürün aileleri --- */
.urun-listesi{background:var(--ground)}
.aile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,30px)}
.aile-kart{background:var(--ground2)}
.aile-kart-bag{display:block;height:100%}
.aile-kart-kare{position:relative;overflow:hidden;background:var(--ground3)}
.aile-kart-kare img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--ease)}
.aile-kart-bag:hover .aile-kart-kare img{transform:scale(1.03)}
.aile-kart-metin{padding:clamp(20px,2.4vw,32px)}
.aile-kart-metin small{
  display:block;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:12px;
}
.aile-kart-metin h2{font:600 clamp(22px,2.2vw,34px)/1.1 var(--serif);letter-spacing:-.03em;margin:0 0 12px;color:var(--ink)}
.aile-kart-metin p{font-size:14px;line-height:1.72;color:var(--ink2);margin:0 0 18px;max-width:46ch}

/* Fotoğrafı henüz gelmemiş aile/kalem: boş kare yerine sakin bir zemin. */
.kare-bos{display:block;width:100%;aspect-ratio:1/1;background:
  repeating-linear-gradient(135deg,var(--ground3) 0 10px,var(--ground2) 10px 20px)}
.aile-kart-kare .kare-bos{aspect-ratio:16/10}

.urun-kart-ok{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid var(--hair2);
}
.aile-kart-bag:hover .urun-kart-ok,
.kalem-kart-bag:hover .urun-kart-ok{border-color:var(--blue);color:var(--blue)}

/* ------------------------------------------------- ailenin kalemleri --- */
.kalem-listesi{background:var(--ground2)}
.kalem-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,22px);
  margin-top:clamp(30px,4.5vh,52px);
}
.kalem-kart{background:var(--ground)}
.kalem-kart-bag{display:flex;flex-direction:column;height:100%}
.kalem-kare{
  position:relative;background:var(--ground);
  padding:clamp(10px,1.4vw,20px) clamp(10px,1.4vw,20px) 0;
}
.kalem-kare img{width:100%;aspect-ratio:1/1;object-fit:contain;transition:transform .6s var(--ease)}
.kalem-kart-bag:hover .kalem-kare img{transform:scale(1.04)}
.kalem-metin{padding:clamp(14px,1.6vw,22px);border-top:1px solid var(--hair);margin-top:auto}
.kalem-metin h3{font:600 clamp(17px,1.5vw,22px)/1.2 var(--serif);letter-spacing:-.02em;margin:0;color:var(--ink)}
.kalem-varyant{
  margin:6px 0 14px;font:600 11px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);
}

/* Föy künyesi: etiket solda, değer sağda, aralarında ince çizgi. */
.kalem-kunye{margin:0;display:grid;gap:7px}
.kalem-kunye > div{display:flex;align-items:baseline;gap:8px}
.kalem-kunye dt{
  flex:none;font-size:11px;letter-spacing:.02em;color:var(--ink4);
}
.kalem-kunye > div:after{
  content:"";order:1;flex:1;height:1px;background:var(--hair);
  transform:translateY(-3px);
}
.kalem-kunye dd{order:2;margin:0;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap}

/* ------------------------------------------------------ tek kalem --- */
.kalem-bas{background:var(--ground);padding-top:clamp(96px,12vh,150px)}
.kalem-bas-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.5vw,80px);align-items:center;
  margin-top:clamp(24px,3.4vh,44px);
}
.kalem-bas-kare{margin:0;background:var(--ground2);padding:clamp(20px,3vw,48px)}
.kalem-bas-kare img{width:100%;aspect-ratio:1/1;object-fit:contain}
.kalem-bas-metin h1{
  font:600 clamp(29px,3.2vw,52px)/1.06 var(--serif);
  letter-spacing:-.035em;margin:14px 0 0;color:var(--ink);
}
.kalem-varyant-buyuk{
  margin:10px 0 0;font:600 12px/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);
}
.kalem-giris{margin:22px 0 0;max-width:44ch;font-size:15px;line-height:1.76;color:var(--ink2)}

.kunye-tablo{margin:clamp(26px,3.4vh,40px) 0 0;display:grid;gap:0}
.kunye-tablo > div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--hair);
}
.kunye-tablo > div:first-child{border-top:1px solid var(--hair2)}
.kunye-tablo dt{
  font:600 10px/1.4 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink4);
}
.kunye-tablo dd{margin:0;font:600 clamp(18px,1.6vw,24px)/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.kalem-bas .actions{margin-top:clamp(26px,3.4vh,38px)}

/* Diğer aileler: kısa rozet şeridi. */
.aile-serit{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3.4vh,40px)}
.aile-rozet{
  padding:11px 18px;border:1px solid var(--hair2);
  font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.aile-rozet:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}

.urun-digerleri{background:var(--ground)}

/* -------------------------------------------------------- iletişim --- */
.iletisim{background:var(--ground)}
.iletisim .kab{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4.5vw,84px);align-items:start}
.iletisim-bilgi h2{font:600 clamp(24px,2.5vw,40px)/1.1 var(--serif);letter-spacing:-.03em;margin:14px 0 30px;color:var(--ink)}
.iletisim-liste{margin:0;display:grid;gap:22px}
.iletisim-liste dt{
  font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:8px;
}
.iletisim-liste dd{margin:0;font-size:15px;line-height:1.7;color:var(--ink2)}
.iletisim-liste dd a:hover{color:var(--blue)}
.iletisim-harita{margin-top:30px;aspect-ratio:4/3;background:var(--ground3)}
.iletisim-harita iframe{width:100%;height:100%;border:0;display:block}

/* Form. */
.iletisim-form{background:var(--ground2);padding:clamp(24px,3vw,44px)}
.form-giris{font-size:14px;line-height:1.7;color:var(--ink2);margin:0 0 24px}
.form-basarili{
  margin:0 0 22px;padding:14px 18px;
  background:var(--blue);color:var(--white);
  font-size:14px;line-height:1.6;
}
.form-satir{margin-bottom:18px}
.form-ikili{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-satir label{
  display:block;margin-bottom:8px;
  font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);
}
.form-satir input,.form-satir textarea,.form-satir select{
  width:100%;padding:13px 14px;
  border:1px solid var(--hair2);background:var(--white);
  font:400 15px/1.5 var(--sans);color:var(--ink);
  transition:border-color .2s var(--ease);
}
.form-satir textarea{resize:vertical;min-height:130px}
.form-satir input:focus,.form-satir textarea:focus,.form-satir select:focus{
  outline:none;border-color:var(--blue);
}
.form-hata{display:block;margin-top:7px;font-size:12px;color:var(--red)}
.form-kvkk{font-size:12px;line-height:1.6;color:var(--ink4);margin:0 0 20px}
.btn-dolu{background:var(--blue);color:var(--white);border-color:var(--blue);cursor:pointer}
.btn-dolu:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* Bal küpü: gerçek ziyaretçi görmez, ekran okuyucu okumaz, sekme almaz. */
.bal-kupu{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------- serbest metin --- */
.serbest{background:var(--ground)}
.serbest-govde{margin-top:clamp(24px,3.4vh,40px)}
.serbest-govde p{font-size:15px;line-height:1.82;color:var(--ink2);margin:0 0 18px}
.serbest-dar p{max-width:64ch}
.serbest-govde h2,.serbest-govde h3{
  font-family:var(--serif);font-weight:600;letter-spacing:-.025em;color:var(--ink);
  margin:34px 0 14px;
}
.serbest-govde ul,.serbest-govde ol{margin:0 0 18px;padding-left:20px;color:var(--ink2);line-height:1.8}

/* Izgara sütun sayıları. */
.ilke-grid-4{grid-template-columns:repeat(4,1fr)}
.ilke-grid-2{grid-template-columns:repeat(2,1fr)}
.tesis-grid-3{grid-template-columns:repeat(3,1fr)}

@media(max-width:1050px){
  .iletisim .kab,.kalem-bas-grid{grid-template-columns:1fr}
  .kalem-grid{grid-template-columns:repeat(3,1fr)}
  .ilke-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .aile-grid{grid-template-columns:1fr}
  .kalem-grid{grid-template-columns:repeat(2,1fr)}
  .form-ikili{grid-template-columns:1fr}
  .ilke-grid-4,.ilke-grid-2,.tesis-grid-3{grid-template-columns:1fr}
}

/* Dar ekranda alan yazısı 16px'in altına düşmüyor: iOS Safari daha
   küçük yazılı alana odaklanınca sayfayı kendiliğinden büyütüyor. */
@media(max-width:760px){
  .form-satir input,.form-satir textarea,.form-satir select{font-size:16px;padding:12px 13px}
  .form-satir textarea{min-height:120px}
}

/* ------------------------------------------------------ hata sayfası --- */
/* Ziyaretçi hata ekranında kaybolmasın: tek ekranlık sakin bir blok ve
   siteye geri dönecek üç kapı. */
.hata-sayfasi{
  min-height:clamp(420px,62vh,640px);
  display:grid;align-items:center;
  padding:clamp(90px,14vh,150px) 32px clamp(60px,9vh,100px);
  background:var(--ground);
}
.hata-sayfasi .kab{max-width:640px}
.hata-sayfasi .eyebrow{display:block;margin-bottom:16px;font-variant-numeric:tabular-nums}
.hata-sayfasi h1{
  margin:0 0 20px;
  font:600 clamp(34px,4.9vw,70px)/1.06 var(--serif);
  letter-spacing:-.035em;color:var(--ink);
}
.hata-sayfasi p{margin:0;max-width:52ch;font-size:15px;line-height:1.78;color:var(--ink2)}
@media(max-width:760px){
  .hata-sayfasi{padding:clamp(76px,12vh,110px) 18px clamp(48px,8vh,80px)}
  .hata-sayfasi h1{font-size:clamp(32px,9vw,46px)}
  .hata-sayfasi .actions{gap:8px}
}