:root{

/* === ANA RENKLER (marka ve ana aksiyonlar) === */

--renk-ana:#2f6fed;        /* Ana butonlar, aktif tab, vurgulu alanlar */
--renk-ana-hover:#1f5cd6;  /* Ana buton hover */
--renk-ikinci:#ffb703;     /* Ikincil butonlar, badge, alternatif vurgu */
--renk-vurgu:#ff6a2e;      /* Ozel vurgu, kampanya, highlight */

/* === DURUM RENKLERI === */

--success:#32d47a; /* Basarili mesaj, onay, yesil ikon */
--warning:#f0ad4e; /* Uyari, dikkat, sari badge */
--danger:#ff3d39; /* Hata, silme, kritik islemler */
--info:#3aa9ff; /* Bilgi mesajlari, ipucu */

/* === ARKAPLAN RENKLERI === */

--bg-sayfa:#f3f4f7;        /* Body arkaplani */
--bg-panel:#ffffff;       /* Ust bar, yan panel, ana container */
--bg-kutu:#ffffff;        /* Card, kutu, liste elemani */
--bg-input:#ffffff;       /* Input, select, textarea ici */

/* === YAZI RENKLERI === */

--yazi-ana:#1a1a1a;        /* Normal metin */
--yazi-silik:#6b6b6b;     /* Aciklama, placeholder, ikincil yazi */
--yazi-ters:#ffffff;      /* Koyu zemin ustu yazi */

/* === CIZGI & KAPLAMA === */

--cizgi:#d1d1d1;           /* Border, ayirici cizgiler */
--kaplama:rgba(0,0,0,.55); /* Modal arkaplani, overlay */

  /* Radius */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:22px;

  /* Shadow */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.18);
  --shadow-md:0 6px 18px rgba(0,0,0,0.28);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.45);

  /* Transition */
  --transition-md:.28s ease;
}
/* =========================================================
   GENEL TASARIM
   ========================================================= */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* body’de scroll yok */
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* ekran yüksekliği */
    background: var(--bg-sayfa);
    color: var(--yazi-ana);
}
#OBBRicerik.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff; /* isteğe bağlı */
  z-index: 9999;
}
#OBBanaDiv {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%; /* body’nin kalan alanını kaplasın */
}

#OBBRustbar {
    flex: 0 0 70px; /* sabit yükseklik */
    background: var(--bg-panel);
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--cizgi);
    box-shadow: var(--shadow-sm);
    user-select:none;
}

#OBBRtabmenu {
    flex: 0 0 60px; /* sabit yükseklik */
    background: var(--bg-panel);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cizgi);
    box-shadow: var(--shadow-sm);
    user-select:none;
}

#OBBRicerik {
    flex: 1;              /* kalan alanı kaplasın */
    display: flex;        /* sağ/sol yan yana */
    overflow: hidden;     /* içerik alanında scroll yok */
    min-height: 0;        /* flex child scroll için kritik */
}

#OBBRsol {
    width: 25%;
    background: var(--bg-panel);
    border-right: 1px solid var(--cizgi);
    padding: 15px;
    overflow-y: auto;     /* scroll sadece burada */
    min-height: 0;
}

#OBBRsag {
    flex: 1;
    background: var(--bg-panel);
    padding: 10px;
    overflow-y: auto;     /* scroll sadece burada */
    min-height: 0;
}
h1,h2,h3,h4,h5,h6{
    margin:0 0 10px;
    font-weight:600;
}
p{margin:0 0 10px;}

/* Scrollbar */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{
    background:var(--cizgi);
    border-radius:var(--radius-sm);
}
::-webkit-scrollbar-track{
    background:var(--bg-panel);
}

.OBBhr{  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #ccc, transparent);
  margin: 10px 0;}

/* =====================================================
   ORTAK MENU RESET
===================================================== */

#OBBRustbar ul,
#OBBRtabmenu ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
        border-left:1px solid var(--cizgi);
        border-right:1px solid var(--cizgi);
  

}

#OBBRustbar li,
#OBBRtabmenu li{
    position:relative;
    height:100%;
    cursor: pointer;
  
}

/* =====================================================
   ORTAK BUTON DAVRANIŞI (A TAG)
===================================================== */

#OBBRustbar li > a,
#OBBRtabmenu li > a{
    display:inline-block;
    height:100%;
    padding:0 22px;
    text-decoration:none;
    color:var(--yazi-ana);
    white-space:nowrap;
    vertical-align:middle;
}

/* TAB MENU yükseklik */
#OBBRtabmenu li > a{
    line-height:60px;
}

/* ÜST BAR yükseklik */
#OBBRustbar li > a{
    line-height:70px;
}

/* =====================================================
   ORTAK ICON
===================================================== */

#OBBRustbar li img,
#OBBRtabmenu li img{
    width:26px;
    height:26px;
    vertical-align:middle;
    margin-right:8px;
}

/* =====================================================
   BADGE
===================================================== */

.OBBbadge{
    position:absolute;
    top:8px;
    right:8px;
    min-width:16px;
    height:16px;
    background:red;
    color:#fff;
    font-size:10px;
    border-radius:50%;
    line-height:16px;
    text-align:center;
    display:none;
        display:flex;
    align-items:center;
    justify-content:center;
}

#badgeSiparis{ background:var(--danger); }
#badgeRezervasyon{ background:var(--warning); }
#badgeMesaj{ background:var(--info); }

.OBBbadge-pop{
    animation:pop .4s ease;
}

@keyframes pop{
  0%{transform:scale(1);}
  50%{transform:scale(1.4);}
  100%{transform:scale(1);}
}

/* =====================================================
   UST BAR
===================================================== */



#OBBRlogo{
    font-size:26px;
    font-weight:700;
    margin-right:30px;
}

/* Üst bar buton kenarlıkları */

#OBBRustbar li{
    border-right:1px solid var(--cizgi);
}

#OBBRustbar li:last-child{
    border-right:none;
}

#OBBRustbar li > a:hover{
    background:var(--bg-sayfa);
}

/* =====================================================
   TAB MENU
===================================================== */



#OBBRtabmenu li{
    border-right:1px solid var(--cizgi);
    
}

#OBBRtabmenu li:last-child{
    border-right:none;
}

#OBBRtabmenu li > a{
    font-size:16px;
}

#OBBRtabmenu li > a:hover{
    background:var(--bg-sayfa);
}

/* =========================================================
   ICERIK
   ========================================================= */



/* LOADER */
#OBB_GLOBAL_LOADER{
 position:fixed;
 inset:0;
 background:rgba(255,255,255,.85);
 z-index:999999;
 display:none;
 align-items:center;
 justify-content:center;
 flex-direction:column;
    
pointer-events:all; /* YÜKLENİRKEN TIKLAMAYI ENGELLE */
}

.obb-spinner{
 width:55px;
 height:55px;
 border:6px solid #ddd;
 border-top-color:#2f6fed;
 border-radius:50%;
 animation:obbspin 1s linear infinite;
}

.obb-loader-text{
 margin-top:15px;
 font-size:15px;
 color:#333;
}

@keyframes obbspin{
 to{ transform:rotate(360deg); }
}


/* =========================================================
   FORM ELEMANLARI
   ========================================================= */

input[type=text],
input[type=number],
input[type=password],
input[type=date],
input[type=time],
select,
textarea{
    width:100%;
    padding:10px 12px;
    background:var(--bg-input);
    border:1px solid var(--cizgi);
    border-radius:var(--radius-md);
    font-size:14px;
    color:var(--yazi-ana);
    outline:none;
    transition:var(--transition-md);
}

input::placeholder,
textarea::placeholder{
    color:var(--yazi-silik);
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--renk-ana);
    box-shadow:0 0 0 3px rgba(47,111,237,.25);
}

/* =========================================================
   BUTON
   ========================================================= */

button{
    background:var(--renk-ana);
    color:var(--yazi-ters);
    border:none;
    padding:10px 18px;
    border-radius:var(--radius-md);
    font-size:14px;
    cursor:pointer;
    transition:var(--transition-md);
    margin:4px 4px 4px 0;
}

button:hover{
    background:var(--renk-ana-hover);
}

.btn-sm{
    padding:6px 12px;
    font-size:13px;
    border-radius:var(--radius-sm);
}

/* =========================================================
   CARD
   ========================================================= */

.card{
    background:var(--bg-kutu);
    border:1px solid var(--cizgi);
    padding:15px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

/* =========================================================
   ALERT
   ========================================================= */

.OBB_alert-bg{
    position:fixed;
    inset:0;
    background:var(--kaplama);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.OBB_alert{
    padding:18px;
    border-radius:var(--radius-lg);
    min-width:360px;
    box-shadow:var(--shadow-lg);
    background:var(--bg-panel);
    color:var(--yazi-ana);
}

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

.OBB_alert-question{
    font-size:16px;
    font-weight:600;
}

.OBB_alert-actions{
    margin-top:16px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.OBB_alert-btn{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--yazi-ters);
    border:none;
    padding:8px 14px;
    border-radius:var(--radius-md);
    cursor:pointer;
    font-size:14px;
    box-shadow:var(--shadow-sm);
}

.OBB_alert-evet{background:var(--success);}
.OBB_alert-hayir{background:var(--danger);}
.OBB_alert-kapat{background:var(--renk-ana);}

/* =========================================================
   BAŞARILI İŞLEM BALONU
   ========================================================= */

.OBB_balon{
    position:fixed;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    background:var(--success);
    color:var(--yazi-ters);
    padding:10px 20px;
    border-radius:var(--radius-md);
    font-size:15px;
    font-weight:bold;
    box-shadow:var(--shadow-md);
    z-index:10000;
    animation:fadeInOut 4s forwards;
}

@keyframes fadeInOut{
    0%{opacity:0;transform:translate(-50%,-20px);}
    10%{opacity:1;transform:translate(-50%,0);}
    90%{opacity:1;}
    100%{opacity:0;transform:translate(-50%,-20px);}
}

.OBB_balon-success{ background:var(--success); }
.OBB_balon-error{ background:var(--danger); }


/* ===============================
   GELİŞMİŞ MODAL - BASİT SÜRÜM
   =============================== */

.OBB_modal-bg{
    position:fixed;
    inset:0;
    background:var(--kaplama);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.OBB_modal{
    background:var(--bg-panel);
    border-radius:var(--radius-md);
    width:auto;
    min-width:320px;
    max-width:95%;
    max-height:90vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}

.OBB_modal-body{
    padding:16px;
    overflow-y:auto;
    overflow-x:hidden;
    flex-grow:1;
    min-height:100px;
}

@keyframes OBB_fadein{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes OBB_zoomin{
    from{transform:scale(.92);}
    to{transform:scale(1);}
}

.OBB_modal-header{
    padding:14px 18px;
    border-bottom:1px solid var(--cizgi);
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:move;
    user-select:none;
}

.OBB_modal-footer{
    padding:12px 16px;
    border-top:1px solid var(--cizgi);
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-shrink:0;
}

.OBB_modal-btn{
    background:var(--renk-ana);
    color:var(--yazi-ters);
    border:none;
    padding:8px 14px;
    border-radius:var(--radius-sm);
    cursor:pointer;
}

.OBB_modal-onay{ background:var(--success); }
.OBB_modal-iptal{ background:var(--danger); }

.OBB_modal-kapat{
    background:var(--danger);
    color:var(--yazi-ters);
    font-size:28px;
    cursor:pointer;
    line-height:1;
    width:36px;
    padding:4px;
}


/* =========================================================
   ADMIN MENU (sol panel)
   ========================================================= */

.admin-menu{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
}

.admin-menu li{ width:100%; }

.admin-menu a{
    display:flex;
    align-items:center;
    padding:12px 14px;
    background:var(--bg-kutu);
    border:1px solid var(--cizgi);
    border-radius:var(--radius-md);
    text-decoration:none;
    color:var(--yazi-ana);
    font-size:15px;
    font-weight:500;
    transition:var(--transition-md);
    box-shadow:var(--shadow-sm);
}

.admin-menu a:hover{
    background:var(--renk-ana);
    color:var(--yazi-ters);
    border-color:var(--renk-ana);
    transform:translateX(4px);
}

.admin-menu a.active{
    background:var(--renk-ana);
    color:var(--yazi-ters);
    border-color:var(--renk-ana);
    font-weight:600;
    transform:translateX(4px);
}

.admin-menu a:hover,
.admin-menu a.active{
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}