/* Otelit — otel bilişim çözümleri
   Palet: gece lacivert (otel cephesi) + mat pirinç (lobi) + soluk petrol (bilişim)
   Kural: degrade yok, neon yok, renkli gölge yok, köşe yarıçapı 4px. */

:root{
  --ink:#0f2233;          /* gece lacivert */
  --ink-2:#1b3a54;
  --pirinc:#b9863f;       /* mat pirinç aksan */
  --pirinc-acik:#cf9b52;
  --petrol:#2f5d62;       /* soluk petrol yeşili */
  --kagit:#f6f3ee;        /* sıcak nötr zemin */
  --kagit-2:#efeae2;
  --beyaz:#fffdfa;
  --metin:#22333f;
  --metin-2:#5b6b78;
  --cizgi:#ded6ca;
  --cizgi-koyu:#274a66;
  --r:4px;
  --olcu:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--kagit); color:var(--metin);
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  color:var(--ink); font-weight:600; line-height:1.22; margin:0 0 .6em;
  letter-spacing:.2px;
}
h1{font-size:clamp(2rem,4.4vw,3.15rem)}
h2{font-size:clamp(1.5rem,2.7vw,2.1rem)}
h3{font-size:1.13rem}
p{margin:0 0 1.1em}
a{color:var(--ink); text-decoration-color:var(--pirinc); text-underline-offset:3px}
a:hover{color:var(--pirinc)}
img,svg{max-width:100%}
.kap{max-width:var(--olcu); margin:0 auto; padding:0 24px}
.bolum{padding:78px 0; border-top:1px solid var(--cizgi)}
.bolum--sik{padding:56px 0}
.ustluk{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--petrol); font-weight:600; margin:0 0 14px;
}
.giris{font-size:1.09rem; color:var(--metin-2); max-width:62ch}
.orta{text-align:center}
.orta .giris{margin-left:auto; margin-right:auto}

/* --- Düğmeler --- */
.dugme{
  display:inline-block; padding:13px 26px; border-radius:var(--r);
  font-size:.95rem; font-weight:600; text-decoration:none; border:1px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.dugme--ana{background:var(--pirinc); color:#fff; border-color:var(--pirinc)}
.dugme--ana:hover{background:#a37031; color:#fff}
.dugme--cizgi{border-color:var(--cizgi-koyu); color:var(--ink)}
.dugme--cizgi:hover{border-color:var(--ink); color:var(--ink); background:var(--kagit-2)}
/* Koyu zeminlerde cizgili dugme: hero, sayfa basligi, koyu bolum ve CTA seridi.
   Biri unutulursa yazi lacivert zeminde lacivert kalir ve okunmaz. */
.koyu .dugme--cizgi,
.hero .dugme--cizgi,
.sayfa-basi .dugme--cizgi,
.cta .dugme--cizgi{border-color:#5d8ab4; color:#e9e3d9}
.koyu .dugme--cizgi:hover,
.hero .dugme--cizgi:hover,
.sayfa-basi .dugme--cizgi:hover,
.cta .dugme--cizgi:hover{background:#16304a; border-color:#5b7f9f; color:#fff}

/* --- Başlık / menü --- */
.ust{position:sticky; top:0; z-index:40; background:var(--kagit); border-bottom:1px solid var(--cizgi)}
.ust__ic{display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px; position:relative}
.marka{display:flex; align-items:center; text-decoration:none}
.marka img{height:42px; width:auto; display:block}
.menu{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.menu a{
  text-decoration:none; font-size:.95rem; font-weight:500; color:var(--metin);
  padding:6px 0; border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink); border-bottom-color:var(--pirinc)}
.menu a.aktif{color:var(--ink); border-bottom-color:var(--pirinc)}
.ust__aksiyon{display:flex; align-items:center; gap:18px}
.tel{font-size:.93rem; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap}
.menu-dugme{
  display:none; background:none; border:1px solid var(--cizgi); border-radius:var(--r);
  padding:9px 12px; cursor:pointer; color:var(--ink); font-size:.9rem;
}

/* --- Hero --- */
.hero{position:relative; background:var(--ink); color:#e9e3d9; overflow:hidden}
.hero__gorsel{
  position:absolute; inset:0;
  background:url("../img/hero-otel.svg") center bottom/cover no-repeat;
}
.hero__perde{position:absolute; inset:0; background:rgba(15,34,51,.60)}
.hero__ic{position:relative; padding:104px 0 92px; max-width:790px}
.hero h1{color:#fdfbf7}
.hero h1 em{font-style:normal; color:var(--pirinc-acik); white-space:nowrap}
/* Cok dar ekranda bolunmez kelime grubu tasmaya yol acar; orada dogal aksin. */
@media (max-width:480px){ .hero h1 em{white-space:normal} }
.hero p{color:#c2cdd6; font-size:1.12rem; max-width:60ch}
.hero .ustluk{color:#8fb3b0}
.hero__butonlar{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero__seritler{
  position:relative; display:flex; flex-wrap:wrap;
  border-top:1px solid #24435f; background:rgba(12,27,41,.72);
}
.hero__serit{flex:1 1 200px; padding:20px 24px; border-right:1px solid #24435f}
.hero__serit:last-child{border-right:0}
.hero__serit b{display:block; color:var(--pirinc-acik); font-size:1.45rem; font-family:"Lora",Georgia,serif; font-weight:600}
.hero__serit span{font-size:.86rem; color:#9fb0bd}

/* --- Sayfa başlığı (iç sayfalar) --- */
.sayfa-basi{position:relative; background:var(--ink); color:#d6dde4; overflow:hidden}
.sayfa-basi__gorsel{position:absolute; inset:0; opacity:.34;
  background:url("../img/bg-sistem-odasi.svg") center/cover no-repeat}
.sayfa-basi__ic{position:relative; padding:70px 0 62px; max-width:720px}
.sayfa-basi h1{color:#fdfbf7; font-size:clamp(1.8rem,3.4vw,2.6rem)}
.sayfa-basi p{color:#a9b8c4; margin:0}
.sayfa-basi .ustluk{color:#8fb3b0}

/* --- Izgara / kartlar --- */
.izgara{display:grid; gap:1px; background:var(--cizgi); border:1px solid var(--cizgi);
        border-radius:var(--r); overflow:hidden}
.izgara--3{grid-template-columns:repeat(3,1fr)}
.izgara--2{grid-template-columns:repeat(2,1fr)}
.kart{background:var(--beyaz); padding:30px 28px}
.kart__no{font-size:.75rem; letter-spacing:.16em; color:var(--pirinc); font-weight:700; display:block; margin-bottom:12px}
.kart h3{margin-bottom:8px}
.kart p{font-size:.96rem; color:var(--metin-2); margin:0}
.kart ul{margin:12px 0 0; padding-left:18px; font-size:.92rem; color:var(--metin-2)}
.kart li{margin-bottom:5px}
.kart__ikon{display:block; margin-bottom:14px; color:var(--petrol)}

/* --- Koyu bölüm --- */
.koyu{position:relative; background:var(--ink); color:#d6dde4; border-top:0; overflow:hidden}
.koyu h2,.koyu h3{color:#fdfbf7}
.koyu .ustluk{color:#8fb3b0}
.koyu p{color:#a9b8c4}
.koyu__gorsel{position:absolute; inset:0; opacity:.28;
  background:url("../img/bg-sistem-odasi.svg") center/cover no-repeat}
.koyu__ic{position:relative}
.koyu .izgara{background:#24435f; border-color:#24435f}
.koyu .kart{background:#12293c}
.koyu .kart p{color:#9fb0bd}
.koyu .kart ul{color:#9fb0bd}

/* --- Desenli bölüm --- */
.desen{background:var(--kagit-2) url("../img/pattern-ag.svg") repeat}

/* --- Adım listesi --- */
.adimlar{list-style:none; margin:0; padding:0; counter-reset:a}
.adimlar li{
  counter-increment:a; position:relative; padding:0 0 30px 58px;
  border-left:1px solid var(--cizgi); margin-left:18px;
}
.adimlar li:last-child{border-left-color:transparent; padding-bottom:0}
.adimlar li::before{
  content:counter(a,decimal-leading-zero); position:absolute; left:-19px; top:-2px;
  width:38px; height:38px; border-radius:var(--r); background:var(--beyaz);
  border:1px solid var(--cizgi); color:var(--pirinc); font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.adimlar h3{margin-bottom:4px}
.adimlar p{font-size:.95rem; color:var(--metin-2); margin:0}

/* --- Etiketler / ikili yerleşim --- */
.etiketler{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none}
.etiketler li{
  border:1px solid var(--cizgi); background:var(--beyaz); border-radius:var(--r);
  padding:8px 14px; font-size:.9rem; color:var(--metin-2);
}
.ikili{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start}
.ikili--dar{grid-template-columns:.9fr 1.1fr}

/* --- Kontrol listesi --- */
.onay{list-style:none; margin:0; padding:0}
.onay li{position:relative; padding:0 0 12px 28px; font-size:.97rem; color:var(--metin-2)}
.onay li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border:1px solid var(--pirinc); background:var(--pirinc); border-radius:1px;
}

/* --- Alıntı --- */
.alinti{border-left:3px solid var(--pirinc); padding:4px 0 4px 22px; margin:0}
.alinti p{font-family:"Lora",Georgia,serif; font-size:1.2rem; color:var(--ink); font-style:italic}
.alinti cite{font-style:normal; font-size:.88rem; color:var(--metin-2)}

/* --- CTA şeridi --- */
.cta{background:var(--ink-2); color:#fff; border-radius:var(--r); padding:44px 40px;
     display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.cta h2{color:#fff; margin:0 0 6px}
.cta p{color:#bfd0dc; margin:0}

/* --- Form --- */
.form{display:grid; gap:16px; grid-template-columns:1fr 1fr}
.alan{display:flex; flex-direction:column; gap:6px}
.alan--tam{grid-column:1/-1}
.alan label{font-size:.86rem; font-weight:600; color:var(--ink)}
.alan input,.alan select,.alan textarea{
  font:inherit; font-size:.95rem; padding:11px 13px; border:1px solid var(--cizgi);
  border-radius:var(--r); background:var(--beyaz); color:var(--metin);
}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:2px solid var(--petrol); outline-offset:1px; border-color:var(--petrol)}
.alan textarea{min-height:130px; resize:vertical}
.kvkk{font-size:.82rem; color:var(--metin-2)}

/* --- İletişim kutusu --- */
.bilgi{border:1px solid var(--cizgi); border-radius:var(--r); background:var(--beyaz); padding:26px}
.bilgi dt{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--petrol);
          font-weight:700; margin-top:18px}
.bilgi dt:first-child{margin-top:0}
.bilgi dd{margin:4px 0 0; font-size:.98rem}

/* --- SSS --- */
.sss{border-top:1px solid var(--cizgi)}
.sss details{border-bottom:1px solid var(--cizgi); padding:18px 0}
.sss summary{cursor:pointer; font-weight:600; color:var(--ink); font-size:1.02rem; list-style:none}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+"; float:right; color:var(--pirinc); font-weight:700}
.sss details[open] summary::after{content:"–"}
.sss p{margin:12px 0 0; font-size:.96rem; color:var(--metin-2); max-width:78ch}

/* --- Alt bilgi --- */
.alt{background:var(--ink); color:#93a3ad; padding:56px 0 28px; font-size:.92rem}
.alt a{color:#c8d2da; text-decoration:none}
.alt a:hover{color:var(--pirinc-acik)}
.alt__ic{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px}
.alt img{height:40px; margin-bottom:14px}
.alt h4{color:#fdfbf7; font-size:.95rem; margin-bottom:14px}
.alt ul{list-style:none; margin:0; padding:0}
.alt li{margin-bottom:9px}
.alt__son{border-top:1px solid #24435f; margin-top:40px; padding-top:20px; display:flex;
          justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem}

@media (max-width:940px){
  .izgara--3{grid-template-columns:repeat(2,1fr)}
  .ikili,.ikili--dar{grid-template-columns:1fr; gap:36px}
  .alt__ic{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .menu{
    display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--kagit);
    border-bottom:1px solid var(--cizgi); padding:8px 24px 18px;
  }
  .menu.acik{display:flex}
  .menu a{padding:12px 0; border-bottom:1px solid var(--cizgi)}
  .menu-dugme{display:block}
  .tel{display:none}
  .izgara--3,.izgara--2{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .bolum{padding:56px 0}
  .hero__ic{padding:70px 0 60px}
  .cta{padding:32px 24px}
  .alt__ic{grid-template-columns:1fr}
}

/* --- Dil secici --- */
.menu__dil a{
  border:1px solid var(--cizgi); border-radius:var(--r); padding:5px 10px !important;
  font-size:.82rem; letter-spacing:.06em; font-weight:600; color:var(--metin-2);
}
.menu__dil a:hover{border-color:var(--pirinc); color:var(--ink); border-bottom-color:var(--pirinc)}

/* --- Blog listesi --- */
.yazilar{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--cizgi);
         border:1px solid var(--cizgi); border-radius:var(--r); overflow:hidden}
.yazi{background:var(--beyaz); padding:30px 28px; display:flex; flex-direction:column}
.yazi__ust{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
           color:var(--petrol); font-weight:600; margin:0 0 12px}
.yazi h3{font-size:1.18rem; margin-bottom:10px}
.yazi h3 a{text-decoration:none}
.yazi p{font-size:.95rem; color:var(--metin-2); margin:0 0 16px}
.yazi__devam{margin-top:auto; font-size:.9rem; font-weight:600; color:var(--pirinc);
             text-decoration:none}
.yazi__devam:hover{text-decoration:underline}

/* --- Makale --- */
.makale{max-width:min(72ch,100%); margin:0 auto}
.makale h2{margin-top:1.9em; font-size:1.55rem}
.makale h3{margin-top:1.5em; font-size:1.12rem}
.makale p,.makale li{font-size:1.03rem}
.makale ul,.makale ol{padding-left:22px; margin:0 0 1.2em}
.makale li{margin-bottom:9px; color:var(--metin)}
.makale .kutu{border:1px solid var(--cizgi); border-left:3px solid var(--pirinc);
              background:var(--beyaz); border-radius:var(--r); padding:20px 24px; margin:28px 0}
.makale .kutu p:last-child{margin-bottom:0}
.makale__bilgi{font-size:.88rem; color:var(--metin-2); border-bottom:1px solid var(--cizgi);
               padding-bottom:18px; margin-bottom:32px}
.makale__son{border-top:1px solid var(--cizgi); margin-top:44px; padding-top:26px}

@media (max-width:940px){ .yazilar{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  .yazilar{grid-template-columns:1fr}
  .menu__dil a{display:inline-block; border-bottom:1px solid var(--cizgi) !important}
}

/* Menu 7 baslikla genisledi: hamburger esigi 1023px'e cekildi */
@media (max-width:1023px){
  .menu{
    display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--kagit);
    border-bottom:1px solid var(--cizgi); padding:8px 24px 18px; z-index:41;
  }
  .menu.acik{display:flex}
  .menu a{padding:12px 0; border-bottom:1px solid var(--cizgi)}
  .menu__dil a{display:inline-block; width:auto}
  .menu-dugme{display:block}
  .tel{display:none}
}

/* --- Erisilebilirlik --- */
/* Gozle gorunmez ama ekran okuyucunun okudugu baslik */
.gizli{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Klavyeyle gezenler icin: sekme tusuna basinca beliren "icerige atla" */
.atla{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--pirinc); color:#fff; padding:13px 22px;
  border-radius:0 0 var(--r) 0; font-weight:600; text-decoration:none;
}
.atla:focus{left:0}
/* Alt bilgi basliklari h4 yerine h2 oldu (baslik sirasi atlanmasin) */
.alt h2{color:#fdfbf7; font-size:.95rem; margin-bottom:14px; font-family:inherit; font-weight:600}