/*=========================== Theme: OtiTalk --------------------------- Bu dosya alphabet şablonunun styles/maincolors.css dosyasının BİREBİR seçici aynasıdır. Şablonun kendi renk katmanı dışına çıkan hiçbir kural içermez (body zemini, p/li metin rengi, başlık renkleri, form alanları vb. style.css'e bırakılmıştır). Böylece tasarım alphabet ile aynı kalır, yalnızca renkler değişir. Şablondaki 3 sabit renk değişkene bağlandı: Purple #34327C -> var(--oti-deep) Pink #d12881 -> var(--oti-primary) Yellow #EC9600 -> metin: var(--oti-accent-soft) / zemin: var(--oti-primary-light) 2. sarı #fdfbe8 -> var(--oti-section-bg) 7 palet ile değiştirilir. ============================ */ /* ========== PALET DEĞİŞKENLERİ ========== */ /* Varsayılan: Marka Teal */ :root, [data-theme="brand-teal"] { --oti-primary: #1C8274; --oti-deep: #0F5147; --oti-field-fill: #F7F3EA; --oti-accent-soft: #A9C4B6; --oti-primary-light: #2aa594; --oti-section-bg: #f5f0e6; } /* Yumuşak Mavi */ [data-theme="soft-blue"] { --oti-primary: #4A7A96; --oti-deep: #274557; --oti-field-fill: #EFF4F7; --oti-accent-soft: #A8C3D4; --oti-primary-light: #5e94b3; --oti-section-bg: #eef4f8; } /* Adaçayı Yeşili */ [data-theme="sage"] { --oti-primary: #567A5E; --oti-deep: #2E4335; --oti-field-fill: #EEF2EC; --oti-accent-soft: #A3B9A1; --oti-primary-light: #6a9473; --oti-section-bg: #ecf0ea; } /* Lila */ [data-theme="lilac"] { --oti-primary: #7C6E9E; --oti-deep: #443C5A; --oti-field-fill: #F2EFF6; --oti-accent-soft: #BBAFD1; --oti-primary-light: #9688b8; --oti-section-bg: #f0ecf5; } /* Pudra Pembe */ [data-theme="dusty-pink"] { --oti-primary: #9C5D6A; --oti-deep: #533139; --oti-field-fill: #F6EEF0; --oti-accent-soft: #D3AEB6; --oti-primary-light: #b87280; --oti-section-bg: #f4eced; } /* Yumuşak Sarı */ [data-theme="soft-yellow"] { --oti-primary: #6E6624; --oti-deep: #3E3A15; --oti-field-fill: #F6F1DC; --oti-accent-soft: #DBD09A; --oti-primary-light: #8a7f2e; --oti-section-bg: #f5f0dc; } /* Kum & Toprak */ [data-theme="sand-clay"] { --oti-primary: #96613C; --oti-deep: #4E3320; --oti-field-fill: #F5EEE4; --oti-accent-soft: #D9BC9C; --oti-primary-light: #b07a4e; --oti-section-bg: #f3ece2; } /*________ Purple -> deep ________ */ .btn.btn-secondary, .bg-primary, .list-group-item.active, .list-group-item:hover, .accordion-button, footer, .nav-pills .nav-link, .nav-tabs .nav-link, .navbar-custom ul.nav ul.dropdown-menu, .pricing-palden .pricing-deco, .panel-heading a.collapsed, .service h4, .team-item:hover .team-caption, .gallery-thumb .link, .pagination .page-link, .breadcrumb, .label-default, .pager li > a, .pager li > span, .fc-direction-ltr .fc-button-group>.fc-button:not(:first-child), .fc-direction-ltr .fc-button-group>.fc-button:not(:last-child), .fc-button.fc-button-primary, .fc .fc-button:not(:disabled), .fc a[data-navlink], .fc-event.fc-event-draggable, .fc-event[href], .form-check-input:checked {background-color:var(--oti-deep);} h1,a, .quote-test:before, .quote-test i, .quote-test small, #blog-page h6, #blog-page blockquote:before, #contact i, .latest-caption h4 {color:var(--oti-deep);} .text-primary {color:var(--oti-deep)!important;} .form-control:focus, .btn.btn-secondary, #carousel-about img, .team-item:hover img, .gallery-thumb:hover .overlay-mask, #call-to-action, .form-check-input:checked {border-color:var(--oti-deep);} /* SVG path */ #deco-clouds path { fill: var(--oti-deep); stroke: var(--oti-deep); } /*________ Pink -> primary ________ */ .nav-item:hover a.nav-link, .bg-secondary, .section-heading h2,.btn, .btn-primary, .slick-dots li button, .slick-dots li button:hover, .slick-prev,.slick-next, .pager li>a:hover, .social-media a i, .back-to-top i:hover, .pagination .page-link:hover, .pagination .page-link:focus, .pager li > a:hover, .pager li > a:focus, .navbar-brand-centered:hover, .navbar-brand-centered:focus, .navbar-toggle:focus, .navbar-toggle:active, .navbar-toggle:hover, .navbar-custom ul.nav li a:hover, .nav-item a.active, .navbar-custom ul.nav ul.dropdown-menu li a:hover, .navbar-custom ul.nav ul.dropdown-menu li a:focus, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .page-item.active .page-link, .page-item.active .page-link:focus, .nav-pills>li.active>a, .nav.nav-pills > li > a:focus, .nav.nav-pills > li > a:hover, .nav.nav-pills > li > .active, .nav-tabs .nav-link:hover, .nav-tabs .nav-link.active:hover, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active, .pricing-item:hover .pricing-deco, .blog-tags a:hover, .fc .fc-button-primary:hover, .fc .fc-list-event-dot {background-color:var(--oti-primary);} a:hover, a:focus, .breadcrumb a:hover, .breadcrumb a:focus, .comment-heading small, #about .media i, .latest-caption h4:hover {color:var(--oti-primary);} .btn{border-color:var(--oti-primary);} /*________ gradient ________ */ .img-effect:hover {background: linear-gradient(-45deg, var(--oti-primary) 0%,var(--oti-accent-soft) 100%);} /*________ Yellow -> accent / primary-light ________ */ .section-heading h2:before, #about .media i:hover, footer i, .smaller.social-media a i:hover, footer a, .post-info i, .breadcrumb>.active, .gallery-thumb i:hover {color:var(--oti-accent-soft);} .navbar-nav, .accordion-button:hover, .accordion-button:not(.collapsed), .service:hover h4, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover, .team-item .team-caption, .navbar-custom ul.nav ul.dropdown-menu li a, .panel-heading a, .panel-heading a:hover, .nav-pills .nav > li > a:focus , .navbar-brand-centered, .navbar-header, .btn:hover,.btn:focus, .btn-primary:hover, .btn-primary:focus, .navbar, .slick-prev:hover, .slick-next:hover, .back-to-top i, #instafeed .likes, .social-media a i:hover, .blog-tags a, .date-category, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {background-color:var(--oti-primary-light);} .team-item img, .elements h5, #layerslider, .btn:hover,.btn:focus, .blog.jumbotron, .comment, .header-text, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {border-color:var(--oti-primary-light);} /*________ Secondary yellow -> section-bg ________ */ section.color-section, .blog-row, #activities .tab-content, .color_block, .cloud-divider, #blog-page blockquote, #layerslider, .comment, .table-striped, .dropdown-menu {background: var(--oti-section-bg);} /* SVG Path */ #deco-clouds1.head path { fill: var(--oti-section-bg); stroke: var(--oti-section-bg); } /*=========================== OtiTalk'a özgü ekler --------------------------- Şablonun renk katmanının dışındaki tek müdahaleler burada toplandı. Her biri OtiTalk varlıklarının şablon varsayımlarına uymamasından kaynaklanan zorunlu düzeltmelerdir. ============================ */ /* Logo oranı düzeltmesi. Şablonun logosu 180x131 (neredeyse kare), OtiTalk logosu 2599x791 (3.3:1 yatay banner). Şablon logoyu YÜKSEKLİĞE göre sınırlar (max-height:75px); bu oranda 247px genişliğe çıkıp 160px'lik marka plakasını ve komşu menü öğelerini taşırıyor. Çözüm plakayı değiştirmek değil, logoyu genişliğe göre sınırlamak — böylece şablonun yerleşimi olduğu gibi korunur. (footer img zaten şablonda max-width:130px ile sınırlı.) */ .navbar-brand-centered img, .navbar-brand-small img { max-width: 150px; } /* Navbar 1200-1400 aralığında sıkışması. Şablon navbar-expand-xl kullanıyor (>=1200'de yatay menü). Menüde 9 bağlantı + ortadaki logo plakası + dil seçici var; 1280/1366 gibi yaygın dizüstü genişliklerinde ikinci satıra taşıyordu. Öğe kaldırmak yerine bu aralıkta yatay boşlukları ve logo plakasını daraltıyoruz; 1400 ve üzeri değişmiyor. */ @media (min-width: 1200px) and (max-width: 1399.98px) { .navbar-nav { flex-wrap: nowrap; } .navbar-nav .nav-link { padding-left: 0.55rem; padding-right: 0.55rem; font-size: 0.95rem; white-space: nowrap; } .navbar-brand-centered { width: 118px; padding: 55px 38px; } .navbar-brand-centered img { max-width: 116px; } } /* Yönetim paneli özellik listesi (şablonda karşılığı yok) */ .oti-check-list { list-style: none; padding: 0; } .oti-check-list li { padding: 8px 0; } .oti-check-list li i { color: var(--oti-primary); margin-right: 10px; } /* Şablonun .service kartı görsel bekler; ikon kullanılan kartlarda görselin yerini tutan ikon bloğu */ .service .oti-service-icon { text-align: center; margin-bottom: 1rem; } .service .oti-service-icon i { font-size: 48px; color: var(--oti-primary); } /* ========== CİHAZ MOCKUP'LARI (#platforms) ========== Gerçek ekran görüntüsü yerine şematik inline SVG. Tüm renkler palet değişkenlerinden geliyor, böylece palet seçici mockup'ları da değiştiriyor. */ /* Üç cihaz farklı en/boy oranında. Sabit yükseklikli bir kutuya ALTTAN hizalanıyorlar; böylece hepsi ortak bir tabana oturuyor ve altlarındaki başlıklar aynı satırda başlıyor. */ .oti-device { display: flex; align-items: flex-end; justify-content: center; height: 340px; } .oti-device svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.16)); } /* Genişlikler 340px'lik kutuya sığacak şekilde seçildi (telefon 165x330, tarayıcı 360x250, saat 150x225). */ .oti-device--phone svg { max-width: 165px; } .oti-device--browser svg { max-width: 360px; } .oti-device--watch svg { max-width: 150px; } @media (max-width: 991.98px) { /* Tek sütuna düşünce sabit yükseklik gereksiz; cihaz kendi boyunu alsın */ .oti-device { height: auto; } } /* Cihaz gövdesi ve ekran */ .oti-device .dev-body { fill: var(--oti-deep); } .oti-device .dev-screen { fill: var(--oti-section-bg); } .oti-device .dev-strap { fill: var(--oti-deep); opacity: 0.75; } /* Arayüz parçaları */ .oti-device .dev-strip { fill: #fff; stroke: var(--oti-field-border, rgba(0,0,0,.08)); stroke-width: 1.5; } .oti-device .dev-chip { fill: var(--oti-accent-soft); } .oti-device .dev-cta { fill: var(--oti-primary); } .oti-device .dev-tile { fill: var(--oti-primary-light); } .oti-device .dev-tile rect:nth-child(even) { fill: var(--oti-accent-soft); } .oti-device .dev-cat { fill: var(--oti-accent-soft); } .oti-device .dev-core { fill: var(--oti-primary); opacity: 0.85; } .oti-device .dev-nav { fill: var(--oti-deep); opacity: 0.12; } .oti-device .dev-navdot { fill: var(--oti-deep); opacity: 0.55; } /* Tarayıcı penceresi */ .oti-device .dev-dot { fill: var(--oti-section-bg); opacity: 0.55; } .oti-device .dev-urlbar { fill: var(--oti-section-bg); opacity: 0.35; } .oti-device .dev-sidebar { fill: var(--oti-deep); opacity: 0.9; } .oti-device .dev-menu { fill: var(--oti-section-bg); opacity: 0.7; } .oti-device .dev-card { fill: var(--oti-accent-soft); opacity: 0.85; } .oti-device .dev-row { fill: var(--oti-deep); opacity: 0.14; } /* Fiyat kartındaki faturalama notu */ .pricing-note { margin: 0.75rem 0 0; font-size: 0.85rem; opacity: 0.75; } /* Mağaza rozetleri */ .oti-store-badge { font-size: 0.8rem; margin-top: 0.5rem; } /* Uygulama yayına girene kadar rozetler pasif */ .oti-store-badge--soon { pointer-events: none; cursor: default; opacity: 0.75; } /* ========== DİL SEÇİCİ ========== */ /* Şablonun kendi .nav-item.dropdown yapısını kullanır; yalnızca 11 dilin taşmaması için yükseklik sınırı gerekir. */ .oti-lang-menu { max-height: 60vh; overflow-y: auto; min-width: 190px; } .oti-lang-menu .dropdown-item { display: flex; align-items: center; gap: 8px; } .oti-lang-menu .dropdown-item.active-lang { font-weight: 700; } .oti-lang-code { display: inline-block; min-width: 2.1em; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; opacity: 0.65; } /* RTL (Arapça) */ /* Şablon Bootstrap'in LTR sürümünü kullanıyor; menü yatayken (navbar-expand-xl => >=1200px) sırayı elle çeviriyoruz. Dar ekranda menü dikey açıldığı için kural uygulanmamalı. */ @media (min-width: 1200px) { [dir="rtl"] .navbar-nav { flex-direction: row-reverse; } } [dir="rtl"] .oti-check-list li i { margin-right: 0; margin-left: 10px; } [dir="rtl"] .oti-palette-switcher, [dir="rtl"] .oti-palette-panel { right: auto; left: 20px; } [dir="rtl"] .oti-palette-option { text-align: right; } [dir="rtl"] .contact-info i, [dir="rtl"] #contact i { margin-right: 0; margin-left: 8px; } /* ========== PALET SEÇİCİ (sayfanın sağ altında küçük fab buton) ========== */ .oti-palette-switcher { position: fixed; bottom: 20px; right: 20px; z-index: 9999; background: var(--oti-primary); color: #fff; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.2s; } .oti-palette-switcher:hover { transform: scale(1.1); } .oti-palette-panel { position: fixed; bottom: 80px; right: 20px; z-index: 9999; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); display: none; min-width: 200px; } .oti-palette-panel.active { display: block; } .oti-palette-panel h6 { margin: 0 0 12px; font-size: 14px; color: var(--oti-deep); font-weight: 700; } .oti-palette-option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s; border: none; background: none; width: 100%; text-align: left; font-size: 13px; color: #333; } .oti-palette-option:hover { background: var(--oti-field-fill); } .oti-palette-option .swatch { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(0,0,0,0.1); } .oti-palette-option.active-palette { background: var(--oti-field-fill); font-weight: 700; } /* ============================================================ Çerez / yerel depolama bildirimi (js/cookie-consent.js) Renkler maincolors.css seçici setinin DIŞINDA tutuldu — tema değiştirme katmanı bu bileşene dokunmasın diye sabit değerler. ============================================================ */ .oti-cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 720px; margin: 0 auto; padding: 16px 18px; border-radius: 12px; background: #ffffff; color: #26313a; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; } .oti-cookie-banner__text { margin: 0; flex: 1 1 320px; } .oti-cookie-banner__actions { display: flex; gap: 8px; flex: 0 0 auto; } .oti-cookie-btn { border: 0; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; /* 44px asgari dokunma hedefi */ min-height: 44px; } .oti-cookie-btn--primary { background: #2f8f83; color: #fff; } .oti-cookie-btn--primary:hover { background: #27766c; } .oti-cookie-btn--ghost { background: transparent; color: #2f8f83; text-decoration: underline; } .oti-cookie-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 16px; } .oti-cookie-modal__box { background: #fff; color: #26313a; border-radius: 14px; padding: 24px; max-width: 640px; width: 100%; max-height: 80vh; overflow-y: auto; font-size: 14px; line-height: 1.55; } .oti-cookie-modal__box h3 { margin: 0 0 10px; font-size: 20px; } .oti-cookie-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } .oti-cookie-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; } .oti-cookie-table td { border-bottom: 1px solid #e6ebee; padding: 8px 6px; vertical-align: top; } .oti-cookie-table thead td { font-weight: 700; border-bottom-width: 2px; } @media (max-width: 575px) { .oti-cookie-banner { flex-direction: column; align-items: stretch; } .oti-cookie-banner__actions { justify-content: flex-end; } }